Question

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

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

＆＃13;

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);

＆＃13;

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

＆＃13;

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

在列表中使用弹性框并应用CSS order属性是另一种可行的解决方案。我实际上改变了代码，没有jQuery：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: