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不应返回布尔值，而应返回负数，正数或零^* ：

    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 。

Answer 2

将您的排序比较运算符更改为- from >将值转换为数字，减法将返回正数，负数或零的数值

也可以使用html(function)或append(function)

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

 <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>