如何保留添加到 jQuery 匹配集中的项目顺序？答案

【问题标题】：How to preserve order of items added to jQuery matched set?如何保留添加到 jQuery 匹配集中的项目顺序？
【发布时间】：2012-11-08 03:21:02
【问题描述】：

我正在尝试以特定顺序将元素添加到 jQuery 对象。但是，结果集的顺序与 DOM 树相同。例如：

<div>one</div>
<span>two</span>
<p>three</p>

...

var $result = $("span").add("p").add("div");

我想要一个结果集，其中 $result[0] 是跨度，$result[1] 是 p，依此类推。但是，它们的顺序与 DOM 中相同。

除了 .add() 之外，还有其他方法可以像我想要的那样构建 jQuery 对象吗？

我知道我可以为它们分配一些数据属性来指定顺序，并以此对我的结果集进行排序。但是，这需要在我的应用程序中发生数十次，并且每次都必须分配订单数据值和排序将非常难看，并且需要很长时间才能实现。

【问题讨论】：

也许你可以包括为什么你需要这个。您可能还没有想到其他选择。
也许你想错了。如果您想要一个订单列表，请使用数组。 jQuery 集合是一个集合（即无序的）。当你在场景中执行一个动作时，你为什么要关心它的顺序？
@Avram 实际上，jQuery 集的排序就像数组一样（它模仿原生数组结构）。
@David，不完全是。这就是问题的全部前提。在当前页面上试试这个：jQuery('#comment-18107721').add(jQuery('#comment-18107717'))。前者在 DOM 中排在后者之后，而 jQuery 集合反映了这一点。关键是集合不是订单集合。如果您想要一个有序集合，请使用数组。如果上面的集合被保存到 var a 中，那么 a.hide() 的作用是一样的，不管它的顺序是什么。
是的，jQuery 反映了 DOM，因为它是 pushStack 代理，但它仍然作为有序数组工作，您可以绝对保留 jQuery 集合中的顺序。这也是我的答案有效的原因。

标签： javascript jquery html dom

【解决方案1】：

你可以使用原生的Array.push：

$.fn.push = function(selector) {
    Array.prototype.push.apply(this, $.makeArray($(selector)));
    return this;
};

var $result = $("span").push("p").push("div");

演示：http://jsfiddle.net/ZUAcy/

你可能认为 jQuery 在 add() 的幕后做了这件事，但它实际上从函数返回了一个 pushStack 来优化它的选择器：http://james.padolsey.com/jquery/#v=1.7.2&fn=jQuery.fn.add

【讨论】：

【解决方案2】：

这可行：

var $result = $([
    $('span')[0],
    $('p')[0],
    $('div')[0]
]);

来自docs on .add()：

要创建一个元素按定义明确的顺序且没有排序开销的 jQuery 对象，请使用$(array_of_DOM_elements) 签名。

【讨论】：

【解决方案3】：

以下代码产生的无序数组：

var $result = $("span").add("p").add("div");

应该用这几行代码转换成有序数组：

var result=$("span").get().concat($("p").get(),$("div").get());
var $result=$(result);

【讨论】：