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

Question

我正在尝试以特定顺序将元素添加到 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 对象吗？

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

Answer 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

Answer 2

这会起作用：

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

从.add() 上的文档：

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

Answer 3

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

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

应该使用以下代码行转换为有序数组：

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