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

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

这适用于任意数量的列表:它基本上收集 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，对它们进行排序，但最后找出li 原本属于。这是一个非常简单直接的解决方案。

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

// 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);
});