Question

我需要整理已按升序显示的元素，以便重新排列。我需要通过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任何帮助..

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

如果您想要数字排序，则不应在.localeCompare函数中使用.sort()。

Answer 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>

如何使用JS在data-attribute中按值排序元素

2 个答案: