javascript - 按跨度类别对 div 进行排序

Question

编辑 我在 fiddle 中工作 http://jsfiddle.net/gandjyar/HM67V/但无法让它在 fiddle 之外工作......想法？

我有以下代码:

<div id="sort">
  <p>Sort Communities By: <a href="#">North</a> | <a href="#">South</a> | <a href="#">East</a> | <a href="#">West</a> | <a href="#">ALL</a>
  </p>
</div>
<div class="fp-floorplans">
  <div id="fp-link">
    <a href="#">Community 1</a>
  </div>
  <div id="wpcf-field-location" class="wpcf-field-checkboxes wpcf-field-location">
    <span class="wpcf-field-name wpcf-field-checkboxes wpcf-field-location-name">Loation:</span>
    <span class="wpcf-field-value wpcf-field-checkboxes-value wpcf-field-location-value">South</span>
  </div>
  <div id="wpcf-field-schools" class="wpcf-field-textfield wpcf-field-schools">
    <span class="wpcf-field-name wpcf-field-textfield wpcf-field-schools-name">School(s):</span> 
    <span class="wpcf-field-value wpcf-field-textfield-value wpcf-field-schools-value">Southwest</span>
  </div>
  <div id="wpcf-field-price-starting-at" class="wpcf-field-textfield wpcf-field-price-starting-at">
    <span class="wpcf-field-name wpcf-field-textfield wpcf-field-price-starting-at-name">Price Starting At:</span>
    <span class="wpcf-field-value wpcf-field-textfield-value wpcf-field-price-starting-at-value">$100's</span>
  </div>
</div>
<div class="fp-floorplans">
  <div id="fp-link">
    <a href="#">Community 2</a>
  </div>
  <div id="wpcf-field-location" class="wpcf-field-checkboxes wpcf-field-location">
    <span class="wpcf-field-name wpcf-field-checkboxes wpcf-field-location-name">Loation:</span>
    <span class="wpcf-field-value wpcf-field-checkboxes-value wpcf-field-location-value">East</span>
  </div>
  <div id="wpcf-field-schools" class="wpcf-field-textfield wpcf-field-schools">
    <span class="wpcf-field-name wpcf-field-textfield wpcf-field-schools-name">School(s):</span>
    <span class="wpcf-field-value wpcf-field-textfield-value wpcf-field-schools-value">Southeast</span>
  </div>
  <div id="wpcf-field-price-starting-at" class="wpcf-field-textfield wpcf-field-price-starting-at">
    <span class="wpcf-field-name wpcf-field-textfield wpcf-field-price-starting-at-name">Price Starting At:</span>
    <span class="wpcf-field-value wpcf-field-textfield-value wpcf-field-price-starting-at-value">$100's</span>
  </div>
</div>

我希望能够按北、南、东、西对“wpcf-field-location-value”进行排序，或者仅对“wpcf-field-schools-value”进行升序排序。

我尝试实现一些我发现的建议，但没有任何效果。 ( Jquery - sort DIV's by innerHTML of children 和 Sorting divs by number inside div tag and jQuery )

Answer 1

首先:html 中不能有相同的 id 值。您可以通过指定 data-id 来添加用户属性。 id 属性值对于整个文档必须是唯一的。

由于北、南、东、西不是按字母顺序排列的，因此您需要将它们替换为其他值。

使用此处提供的代码(经过一些编辑):Jquery - sort DIV's by innerHTML of children

var direction={north:0,south:1,east:2,west:3}
function sortOn(primary){
  primary=primary.toLowerCase();
  for(item in direction){
    if(direction[item]===0){
      break;
    }
  }
  var tmp=direction[primary];
  direction[primary]=0;
  direction[item]=tmp;
    var items = $(".fp-floorplans").sort(function(a, b) {
        var vA = $(a).find("wpcf-field-location-value").text().trim().toLowerCase();
        var vB = $(b).find("wpcf-field-location-value").text().trim().toLowerCase();
        if(directions[vA]===directions[vB]){
          //secondary search
          vA = $(a).find("wpcf-field-schools-value").text().trim().toLowerCase();
          vB = $(b).find("wpcf-field-schools-value").text().trim().toLowerCase();
          return (vA < vB) ? -1 : (vA > vB) ? 1 : 0;
        }
        // primary searh (a and b cannot be the same)
        return (vA < vB) ? -1 : 1;
    });
}

sortOn("west");

要更改顺序的优先级(例如西优先)，您可以在排序之前更改 Directions 变量: 方向={北:3，南:1，东:2，西:0}

首先，您需要查看当前包含 0 的值，然后将其替换为新的值。