JavaScript通过一些比较器来排序DOM元素，没有jQuery [英] JavaScript to sort DOM elements by some comparator, without jQuery

问题描述

想象一下DOM元素：

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

如何使用JavaScript和没有jQuery对这些元素进行排序？

How can these elements be sorted using JavaScript and without jQuery?

类似于

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

推荐答案

您应该使用flexboxes的订购功能。这将允许重新排序元素，而不会在DOM中移动它们。这涉及设置CSS 订单属性。

You should use the ordering capabilities of flexboxes. This will allow to re-order the elements without moving them around in the DOM. This involves setting the CSS order property.

请参阅 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes for更多细节。

See https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes for more details.

这篇关于JavaScript通过一些比较器来排序DOM元素，没有jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！