javascript - jQuery 按数据属性排序

Question

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

<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 不应返回 bool 值，而应返回负数、正数或零^*:

   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。