JavaScript 通过一些比较器对 DOM 元素进行排序，没有 jQuery

Question

想象一些 DOM 元素:

<ul id="list">
  <li data-index="3">Baz</li>
  <li data-index="1">Foo</li>
  <li data-index="2">Bar</li>
</ul>

如果不使用 jQuery，如何使用 JavaScript 对这些元素进行排序？

类似于:

document.getElementById('list').sort(function(li) { return li.dataset.index; });

Answer 1

您应该使用弹性盒的排序功能。这将允许重新排序元素，而无需在 DOM 中四处移动它们。这涉及设置 CSS order 属性。

参见 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes了解更多详情。