javascript - JQuery按值排序div，如果值为零则跳过

Question

我已经在我的代码中完成了排序，但我不想重新加载整个 json 结果，而是希望为我的 div 进行客户端重新排序。

我的 C# 订购代码是：

.OrderBy(p=> p.order == 0? int.MaxValue : p.order);

这给了我这样的结果

• 1
• 2
• 3
• 4
• 0
• 0
• 0

我的 HTML 架构就像

<div class="item" data-sort="0" id="5051fb7c746eed1bf05309db">
 <span>Some values</span>
 <span>Some values</span>
  <div class="subgroups">
    <div class="item" data-sort="null" id="5060de4a746eed1b44cc6e90"></div>
  </div> <!-- closing subgroups -->
</div> <!-- closing main div which need to be sorted -->

<div class="item" data-sort="2" id="5051fb7c746eed1bf05309db">
  <span>Some values</span>
  <span>Some values</span>
  <div class="subgroups">
    <div class="item" data-sort="null" id="5060de4a746eed1b44cc6e90"></div>
  </div> <!-- closing subgroups -->
</div> <!-- closing main div which need to be sorted -->

<div class="item" data-sort="0" id="5051fb7c746eed1bf05309db">
  <span>Some values</span>
  <span>Some values</span>
  <div class="subgroups">
    <div class="item" data-sort="null" id="5060de4a746eed1b44cc6e90"></div>
  </div> <!-- closing subgroups -->
</div> <!-- closing main div which need to be sorted -->

我如何重新排序这些divs，以便第二个成为第一个，而那些数据为 0 的将在重新排序时最后一个。

Answer 1

如果您使用 jQuery ，请查看 jQuery 插件TinySort 。以下是它的使用示例：

$(".item").tsort({ attr: 'data-sort',order:'desc'});

我认为如果你可以输出 0 或 -1 而不是 null 到 data-sort 属性，它应该把这些项目放在最后。

Answer 2

你也可以这样做：

将所有 div 放入父 div

<div id="parentDiv">
..
</div>

然后你可以像这样排序

$(function(){

  function sort_comp(a, b){
    var k1 = parseInt($(a).attr("data-sort"),10);
    if(k1 === 0) k1 = Number.MAX_VALUE;
    var k2 = parseInt($(b).attr("data-sort"),10);
    if(k2 === 0) k2 = Number.MAX_VALUE;
    return (k1-k2);
  }

  var arr = $.makeArray($("#parentDiv > .item"));
  arr.sort(sort_comp);
  $("#parentDiv > .item").remove();
  $(arr).each(function(){
    $("#parentDiv").append($(this));
  });
});