Question

我有一个用户列表

<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

Answer 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

Answer 2

您可以通过arrayVariable.sort（compare_method）;对数组进行排序或者您可以编写一个数组，使所有内容保持排序。无论哪种情况，您都必须编写自己的函数，以您希望的方式比较数组的项。

如果第一项在第二项之前，则

比较方法将提供-1。如果第一个项目必须在第二个项目之后，则它将发送-1。 0表示项目相等。

另请参阅：http://www.mattmorgante.com/technology/javascript-sort-compare

jQuery：添加元素时如何排序元素？

2 个答案: