按属性排序DOM元素（顺序）

Question

我将LI元素随机放置在UL中，我需要按data-order属性值对其进行排序。也就是说，在排序操作之后，LI元素的DOM顺序应对应于它们的data-order值。

我的问题是，如何将此排序器应用于empty / append序列以删除和创建DOM元素？

function sortEventsByOrder(a,b) {

	var startA = parseInt($(a).attr('data-order'));
	var startB = parseInt($(b).attr('data-order'));	
	return startA - startB;
}

$('#eventList li').sort(sortEventsByOrder);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="eventList">
   <li data-order="5">Element 5</li>
   <li data-order="3">Element 3</li>
   <li data-order="6">Element 6</li>
   <li data-order="1">Element 1</li>
   <li data-order="2">Element 2</li>
   <li data-order="4">Element 4</li>
</ul>

Answer 1

您的排序正确，但是没有替换DOM中的列表项。

function sortEventsByOrder(a,b) {
	const startA = parseInt($(a).data('order'));
	const startB = parseInt($(b).data('order'));	
	return startA - startB;
}

$('#eventList').html($('#eventList li').sort(sortEventsByOrder))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="eventList">
   <li data-order="5">Element 5</li>
   <li data-order="3">Element 3</li>
   <li data-order="6">Element 6</li>
   <li data-order="1">Element 1</li>
   <li data-order="2">Element 2</li>
   <li data-order="4">Element 4</li>
</ul>

Answer 2

在列表中使用弹性框并应用CSS order属性是此处的另一可行解决方案。我实际上将代码更改为不使用jQuery：

[...document.querySelectorAll('#eventList li')].forEach((listItem) => {
  listItem.style.order = listItem.dataset.order;
});

#eventList {
  display: flex;
  flex-direction: column;
}

<ul id="eventList">
  <li data-order="5">Element 5</li>
  <li data-order="3">Element 3</li>
  <li data-order="6">Element 6</li>
  <li data-order="1">Element 1</li>
  <li data-order="2">Element 2</li>
  <li data-order="4">Element 4</li>
</ul>