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

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插件/方法：

$(".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

将排序比较运算符从 - 更改为 > ，这会将值转换为数字，并且减法将返回数字值，即正，负或零

也可以使用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按数据属性排序

2 个答案: