按跨度类对 div 进行排序

Question

编辑 我有这个在小提琴http://jsfiddle.net/gandjyar/HM67V/ 工作，但不能让它在小提琴之外工作......想法？

我有以下代码：

<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");

要更改顺序的优先级（如西优先），您可以在排序前更改方向变量： 方向={北：3，南：1，东：2，西：0}

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