jQuery按数据属性排序

Question

我在div中有一些项目data-order附加了data属性:

<div class="list">
   <a href="#" data-order="4">Thing 4</a>
   <a href="#" data-order="3">Thing 3</a>
   <a href="#" data-order="1">Thing 1</a>
   <a href="#" data-order="2">Thing 2</a>
</div>

但是我试图让它们显示数字顺序(升序 - 1,2,3等):

<div class="list">
   <a href="#" data-order="1">Thing 1</a>
   <a href="#" data-order="2">Thing 2</a>
   <a href="#" data-order="3">Thing 3</a>
   <a href="#" data-order="4">Thing 4</a>
</div>

我有这个:

  $(".list a").sort(function(a, b) {
    return $(a).attr("data-order") > $(b).attr("data-order");
  }).each(function() {
    $(".list").prepend(this);
  });

但这似乎真的搞乱了订单.所以我不太清楚我做错了什么,或者是否有更简单的方法可以让它们正确排序.

Answer 1

一些东西:

1. sort不应该返回布尔值,而是返回负数,正数或零^*:

   if (a  <  b) return -1; //negative
   if (a  >  b) return 1;  //positive
   if (a === b) return 0;  //0
   

   更容易表达为:

   return a - b;
   

2. 你可以appendTo()代替.each( .append() )我使用,我希望它会表现得稍好一些.

3. .attr("data-order")可以表示为.data("order")(虽然这更多是一个偏好的问题).

$(".list a")
    .sort((a,b) => $(a).data("order") - $(b).data("order"))
    .appendTo(".list");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list">
  <a href="#" data-order="4">Thing 4</a>
  <a href="#" data-order="3">Thing 3</a>
  <a href="#" data-order="1">Thing 1</a>
  <a href="#" data-order="2">Thing 2</a>
</div>

更进一步,你甚至可以创建自己的jQuery插件/方法:

$(".list").sortChildren();

$.fn.sortChildren = function() {
    this
      .children()
      .sort((a,b) => $(a).data("order") - $(b).data("order") || -1)
      .appendTo(this);

    return this;
}

$(".list").sortChildren();
    

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list">
  <a href="#" data-order="4">Thing 4</a>
  <a href="#" data-order="3">Thing 3</a>
  <a href="#" data-order="1">Thing 1</a>
  <a href="#" data-order="2">Thing 2</a>
</div>

*感谢charlieftl稍作修正.

随着他的注意,sort()并没有返回-1,0或者1,我们获得的几件事情:

• 我们可以简单a - b地确定排序顺序

• 我们不再需要解析这些值.该-运营商只能用数值来使用,所以它将解析a和b自身.