按属性对 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>