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

几件事：

sort 不应该 return 布尔值，而是负数、正数或零^*:

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

更容易表达为：

return a - b;

您可以使用 appendTo() 代替 .each( .append() )，我希望它的性能稍微好一些。
.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 plugin/method:

$(".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() 不必 return -1、0 或 1，我们得到了一些东西：

我们可以简单地a - b来确定排序顺序
我们不再需要解析这些值。 - 运算符只能用于数值，因此它将自行解析 a 和 b。

Answer 2

将您的排序比较运算符从 > 更改为 -，这会将值转换为数字和减法将 return 为正、负或零的数值

也可以使用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>

jQuery 按数据属性排序

jQuery sort order by data attribute

html

javascript

sorting

jquery

custom-data-attribute