如何使用 JS 按数据属性中的值对元素进行排序答案

【问题标题】：How to sort out elements by their value in data- attribute using JS如何使用 JS 按数据属性中的值对元素进行排序
【发布时间】：2013-01-02 23:41:17
【问题描述】：

我需要对已经按升序显示的元素进行排序，以便它们重新排列。我需要根据它们的 data-val 属性中的值对它们进行排序。

<div id="a" class="item" data-val="6">Item a</div>
<div id="b" class="item" data-val="8">Item b</div>
<div id="c" class="item" data-val="2">Item c</div>
<div id="d" class="item" data-val="5">Item d</div>

<br />
<button onclick="sortOut()">Sort Out</button>

我这里做了一个例子：http://jsfiddle.net/quatzael/uKnpa/

我不知道该怎么做。我有点开始，但它可能是错误的。

我需要该函数首先找出哪些元素具有名为“item”的类，然后根据其 data-val 属性的值对具有此类的元素进行排序。

它必须适用于所有浏览器，因此解决方案可能应该涉及 .appendChild()

Tnx 寻求帮助..

【问题讨论】：

你可以在这里查看我对类似问题的回答：stackoverflow.com/questions/71378596/…

标签： javascript sorting appendchild

【解决方案1】：

您需要以新排序的顺序将它们附加到 DOM。

这是我添加到您的代码中的内容：

divs.sort(function(a, b) {
    return a.dataset.val.localeCompare(b.dataset.val);
});

var br = document.getElementsByTagName("br")[0];

divs.forEach(function(el) {
    document.body.insertBefore(el, br);
});

http://jsfiddle.net/RZ2K4/

如果您的排序项目位于没有其他内容的容器中，则可以使用 appendChild() 方法代替 .insertBefore()。

要支持旧版浏览器，您可以使用.getAttribute("data-val") 而不是.dataset.val。

如果你想要一个数字排序，你不应该在.sort()函数中使用.localeCompare。

【讨论】：

在这种情况下，使用return +a.dataset.val - +b.dataset.val;
我修改了，还是不行..http://jsfiddle.net/quatzael/RZ2K4/2/
@user1850012：在这里工作，在 FF 和 Chrome 中。使用localeComapre 和+a.dataset.val 的顺序都是正确的。
现在工作了！！！非常感谢！！ http://jsfiddle.net/RZ2K4/3/

【解决方案2】：

您可以为包装器添加flex 属性并使用order 来订购它们。或者您可以将元素重新附加到其父级

Demo

const items = Array.from(document.querySelectorAll("li"));
const btn = document.querySelector("button");
const orderBy = Array(5).fill().map((x, i) => i + 1); // [1..5]

btn.addEventListener("click", clickHander);
function clickHander() {
  orderBy.forEach(i => {
    const item = items.find(x => x.getAttribute("data-order") === `${i}`);
    item.style.order = i;
    // OR: item.parentElement.appendChild(item);
  });
}

ul {
  display: flex;
  flex-direction: column;
}

<ul>
  <li data-order="4">order 4</li>
  <li data-order="3">order 3</li>
  <li data-order="1">order 1</li>
  <li data-order="5">order 5</li>
  <li data-order="2">order 2</li>
</ul>
<button>sort</button>

【讨论】：