I am trying to add elements to a jQuery object in a specific order. However, the result set is ordered the same as the DOM tree. For example:

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

...

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

I want a result set where $result[0] is the span, $result[1] is the p, and so on. However, they are ordered the same as in the DOM.

Is there another way to build out a jQuery object like I'm intending, other than .add()?

I'm aware that I could assign some data property to them to specify order, and sort my result set by that. However, this will need to happen dozens of times within my app and having to assign order data values and sorting each time will be really ugly, and would take too long to implement.

I am trying to add elements to a jQuery object in a specific order. However, the result set is ordered the same as the DOM tree. For example:

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

...

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

I want a result set where $result[0] is the span, $result[1] is the p, and so on. However, they are ordered the same as in the DOM.

Is there another way to build out a jQuery object like I'm intending, other than .add()?

I'm aware that I could assign some data property to them to specify order, and sort my result set by that. However, this will need to happen dozens of times within my app and having to assign order data values and sorting each time will be really ugly, and would take too long to implement.

• javascript
• jquery
• html
• dom

• Perhaps you could include why you need this. It's possible there is another alternative you have not thought of. – James Montagne Commented Nov 8, 2012 at 3:35
• 1 Perhaps you're thinking about this the wrong way. If you want an order list, use an array. A jQuery set is a set (i.e. unordered). When you perform an action on the set, why do you care what order it is in? – Avi Commented Nov 8, 2012 at 3:35
• @Avram actually, a jQuery set is ordered just like an Array (it mimics a native Array contruct). – David Hellsing Commented Nov 8, 2012 at 3:41
• @David, not quite. That's the whole premise of the question. Try this on the present page: jQuery('#ment-18107721').add(jQuery('#ment-18107717')). The former es after the latter in the DOM and the jQuery set reflects that. The point is that a set isn't an order collection. If you want an ordered collection, use an array. If the above set were saved to var a, then a.hide() acts the same no matter what order it's in. – Avi Commented Nov 8, 2012 at 3:49
• Yes, jQuery reflects the DOM because of it’s pushStack proxy but its still working as an ordered Array and you can absolutely preserve order within a jQuery collection. That is also why my answer works. – David Hellsing Commented Nov 8, 2012 at 3:51

3 Answers 3

You can use the native Array.push:

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

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

DEMO: http://jsfiddle/ZUAcy/

You might think that jQuery does this behind the hood of add() but it actually return a pushStack from the function to optimize it’s selectors: http://james.padolsey./jquery/#v=1.7.2&fn=jQuery.fn.add

This would work:

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

From the docs on .add():

To create a jQuery object with elements in a well-defined order and without sorting overhead, use the $(array_of_DOM_elements) signature.

the unordered array produced by the following code:

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

should transform into an ordered array with these lines of code:

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