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的值，然后将其替换为新的。

按span类排序div

1 个答案: