Jquery：添加元素时如何对元素进行排序？答案

【问题标题】：Jquery : how to order elements while adding them?Jquery：添加元素时如何对元素进行排序？
【发布时间】：2019-07-28 22:20:57
【问题描述】：

我有一个用户列表

<div id="userList">
</div>

我在哪里添加 dom/html 元素，例如：

<div data-name="john" data-gender="m">john</div>
<div data-name="alan" data-gender="m">alan></div>
<div data-name="mike" data-gender="m">mike</div>
<div data-name="jennifer" data-gender="f">jennifer</div>
<div data-name="sandy" data-gender="f">sandy</div>

如何添加它们，以便它们先按性别排序，然后按名称排序

所以最终的输出是：

jennifer
sandy
alan
john
mike

【问题讨论】：

嗨！请使用tour（您将获得徽章！）并通读help center，尤其是How do I ask a good question? 您最好的选择是进行研究，search 以获取有关 SO 的相关主题，然后试一试. 如果您在进行更多研究和搜索后遇到困难并且无法摆脱困境，请发布您的尝试minimal reproducible example，并具体说明您遇到的问题。人们会很乐意提供帮助。

标签： javascript jquery

【解决方案1】：

这只是一个sort。我们可以从您的问题中知道：

如果gender相同，按名称排序
否则，女性优先

这是代码

var ul = document.getElementById('userList');
		var divs = [].slice.call(ul.children);
		[].sort.call(divs, (a,b) => {
			var genderA = a.getAttribute('data-gender');
			var genderB = b.getAttribute('data-gender');
			var nameA = a.getAttribute('data-name');
			var nameB = b.getAttribute('data-name');
			if (genderA === genderB) {
				// console.log(nameA < nameB)
				return nameA < nameB ? -1 : (nameA > nameB ? 1 : 0);
			}
			// console.log(genderA == 'f' ? -1 : 1)
			return genderA == 'f' ? -1 : 1;
		});
		console.log(divs);

	original: 
	<ul id="userList">
		<div data-name="john" data-gender="m">john</div>
		<div data-name="alan" data-gender="m">alan</div>
		<div data-name="mike" data-gender="m">mike</div>
		<div data-name="jennifer" data-gender="f">jennifer</div>
		<div data-name="sandy" data-gender="f">sandy</div>
	</ul>
	<hr>
	sorted:
	see Console

【讨论】：