按数据属性对列表进行排序

Question

我有一份人员名单，职位名称按人员的名字排序，如下所示：

<ul>
  <li data-azsort="smithjohn">
    <a href="#">
      <span class="list-name">John Smith</span>
    </a>
    <span class="list-desc">Professor</span>
  </li>
  ..
  <li data-azsort="barnestom">
    <a href="#">
      <span class="list-name">Tom Barnes</span>
    </a>
    <span class="list-desc">Lecturer</span>
  </li>
</ul>

我已将 data-azsort 属性添加到 <li> 元素，我想将这些列表元素弹出到一个数组中，并根据 data-* 属性进行排序（使用普通 JavaScript）。

按 data-azsort (A-Z) 对列表进行排序并返回相同代码的最佳方法是什么？只有JavaScript，没有jQuery，等等

Answer 1

如何获取所有列表项，将它们推入稍后排序的数组？

var allListElements = document.getElementById("staff").getElementsByTagName("li");
var staff = new Array();
for (i = 0; i < allListElements.length; i++) {
  staff.push(allListElements[i].getAttribute('data-azsort'));
}

staff.sort(function(a, b) {
  if (a < b) return -1;
  if (a > b) return 1;
  return 0;
});

//Print

document.write('<h4>Sorted</h4>');
for (i = 0; i < staff.length; i++) { 
  document.write(staff[i] + "<br />");
}

<h4>Input</h4>

<ul id="staff">
  <li data-azsort="smithjohn">
    <a href="#">
      <span class="list-name">John Smith</span>
    </a>
    <span class="list-desc">Professor</span>

  </li>
  <li data-azsort="barnestom">
    <a href="#">
      <span class="list-name">Tom Barnes</span>
    </a>
    <span class="list-desc">Lecturer</span>

  </li>
</ul>

此外，您可以保存 <li> 的索引并重新排序 <ul>。

Answer 2

您可以将比较函数传递给 Array.prototype.sort

你应该可以做类似

的事情

$items = $('li[data-azsort]');
var compareElem = function (a, b) {
  if (a.attr('data-azsort') > b.attr('data-azsort') {
    return 1;
  } else {
   return -1
  }
};
Array.prototype.sort.apply($items, compareElem);

Answer 3

这适用于任意数量的列表：它基本上收集 ul 中具有您的属性的所有 li，根据它们的 data-* 属性值对它们进行排序，然后重新将它们附加到它们的父级。

Array.from(document.querySelectorAll("ul > li[data-azsort]"))
  .sort(({dataset: {azsort: a}}, {dataset: {azsort: b}}) => a.localeCompare(b)) // To reverse it, use `b.localeCompare(a)`.
  .forEach((item) => item.parentNode.appendChild(item));

<ul>
  <li data-azsort="skeetjon">
    <a href="#"><span class="list-name">Jon Skeet</span></a>
    <span class="list-desc">Stack Overflow user</span>
  </li>
  <li data-azsort="smithjohn">
    <a href="#"><span class="list-name">John Smith</span></a>
    <span class="list-desc">Professor</span>
  </li>
  <li data-azsort="barnestom">
    <a href="#"><span class="list-name">Tom Barnes</span></a>
    <span class="list-desc">Lecturer</span>
  </li>
</ul>
<ul>
  <li data-azsort="smithjohn">
    <a href="#"><span class="list-name">John Smith</span></a>
    <span class="list-desc">Professor</span>
  </li>
  <li data-azsort="barnestom">
    <a href="#"><span class="list-name">Tom Barnes</span></a>
    <span class="list-desc">Lecturer</span>
  </li>
  <li data-azsort="skeetjon">
    <a href="#"><span class="list-name">Jon Skeet</span></a>
    <span class="list-desc">Stack Overflow user</span>
  </li>
</ul>

有趣的是，它获取了相同数组中的所有li，对它们进行排序，但最后找出了[=14]的列表=]原来属于。这是一个非常简单直接的解决方案。

如果您想按数字数据属性对元素进行排序，请改用此排序函数：

// Presumably, the data-* attribute won’t be called `azsort`. Let’s call it `numsort`.
({dataset: {numsort: a}}, {dataset: {numsort: b}}) => Number(a) - Number(b) // `Number(b) - Number(a)` to reverse the sort.

稍长的 ECMAScript 5.1 替代方案是：

Array.prototype.slice.call(document.querySelectorAll("ul > li[data-azsort]")).sort(function(a, b) {
  a = a.getAttribute("data-azsort");
  b = b.getAttribute("data-azsort");

  return a.localeCompare(b);
}).forEach(function(node) {
  node.parentNode.appendChild(node);
});

按数据属性对列表进行排序

Sorting a list by data-attribute

html

javascript

sorting

html-lists