javascript - 按属性对 jQuery 结果进行排序？

Question

是否可以按属性值对 jQuery 结果进行排序？例如，考虑以下代码片段和结果:

$('span').each(function()
{
    $('#log').append($(this).attr('name'));
});

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

<span name="a5"></span>
<span name="a3"></span>
<span name="a6"></span>
<span name="a1"></span>
<span name="a4"></span>

<div id="log"></div>

在不修改 HTML 或 DOM 的情况下，如何最好地修改此代码以获得排序结果，即。 a1a3a4a5a6？虽然我显然可以将每个结果放在一个数组中，然后对其进行排序，但我假设有一种更优雅的方法来使用 jQuery 的 native 功能。有吗？

Answer 1

您不需要构建中间数组，jQuery 公开 Array.prototype.sort方便方法:

$.fn.sort = Array.prototype.sort;

并且由于 Array.prototype.sort; 是通用的 ⁽*⁾ 它可以神奇地与 jQuery 配合使用也有收藏。

$('span')
.sort(function(a, b) { 
    return $(a).attr('name').localeCompare($(b).attr('name')); 
})
.each(function() {
    $('#log').append($(this).attr('name'));
});

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

<span name="a5"></span>
<span name="a3"></span>
<span name="a6"></span>
<span name="a1"></span>
<span name="a4"></span>

<div id="log"></div>

<小时/><子> * 原型(prototype)方法上下文中的泛型意味着方法内部实现不关心 this 实例是否是真正的 Array 实例，只要它是一个 array-like collection 。