按数据属性对列表进行排序 [英] Sorting a list by data-attribute

问题描述

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

I have a list of people with job titles sorted by the persons’ first names, like this:

<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）。

I’ve added the data-azsort attribute to the <li> element, and I’d like to pop these list elements into an array, and sort based on that data-* attribute (using plain JavaScript).

通过 data-azsort <对列表进行排序的最佳方法是什么？ / code>（AZ），返回相同的代码？仅限JavaScript，没有jQuery等。

What would be the best way to sort the list by data-azsort (A-Z), returning the same code? JavaScript only, no jQuery, etc.

推荐答案

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

This works for any number of lists: it basically gathers all lis in uls that have your attribute, sorts them according to their data-* attribute value and re-appends them to their parent.

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="smithjohn">
    <a href="#"><span class="list-name">John Smith</span></a>
    <span class="list-desc">Professor</span>
  </li>
  <li data-azsort="xufox">
    <a href="#"><span class="list-name">Xufox</span></a>
    <span class="list-desc">StackOverflow User</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="xufox">
    <a href="#"><span class="list-name">Xufox</span></a>
    <span class="list-desc">StackOverflow User</span>
  </li>
</ul>

有趣的事情是的，它在相同的数组中得到所有 li s，对它们进行排序，但最后确定哪个列表 li 最初属于。这是一个非常简单直接的解决方案。

The funny thing is, it gets all lis in the same array, sorts them all, but in the end figures out which list the li originally belonged to. It’s a pretty simple and straight-forward solution.

稍微长一点的ECMAScript 5.1替代方案是：

A slightly longer ECMAScript 5.1 alternative would be:

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

这篇关于按数据属性对列表进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！