Порядок сортировки 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

Измените оператор сравнения сортировки на - с >, который приведёт значения к числам, а вычитание вернет числовое значение, которое является положительным, отрицательным или нулевым

Можно также использовать 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>

Answer 2

Несколько вещей:

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 самостоятельно.