1

我需要对已经按升序显示的元素进行排序，以便它们重新排列。我需要按它们的 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 的任何帮助..

4

2 回答 2

3

您需要以新排序的顺序将它们附加到 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()函数中使用。

于 2013-01-02T23:48:05.960 回答
0

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

演示

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>

于 2020-09-08T16:28:47.533 回答