Call show on array of jQuery objects

Question

I have a little problem concerning performance of jQuery.show. This problem occurs in IE8 (probably also versions below, but IE8 is of my interest).

I have an array of jQuery objects, lets call it elements. I want to show them, so i did:

for (var i = elements.length - 1; i >= 0; i--) {
    elements[i].show();
}

The bottleneck seems to be the call to show. The array is already generated, so that takes no time. looping through an array should not be a problem either.

I thought of reducing this to one call to show by creating a new jQuery element containing all my elements. but I was not sure how to do this. I tried by jQuery.add.

var $elements = elements[0];
for (var i = elements.length - 1; i >= 1; i--) {
     $elements = $elements.add(elements[i]);
}
$elements.show();

Now, this time it seems to be a problem with jQuery.add. Probably because it always creates a new object.

So, I thought of three different approaches that could solve my problem. Maybe you can help me with one of them:

• Is there a jQuery method like add that does not return a new object, but instead adds it to the current jQuery element?
• Is there an easy and fast way to create a jQuery element by an array of jQuery elements?
• Is there a way to show all jQuery objects in an array in a faster way?

Answering just one of the question would probably help me out here. My problem is, that jquery always expects an array of DOM elements and not an array of jQuery elements in its methods.

Thanks a lot in advance!

-- EDIT about the contents of elements

I have a jstree that dynamically creates nodes (that is, li elements). These elements have an attribute data-id to identify them. Now, I could always query for something like $('li[data-id=xxx]'), but this would be very slow. So instead, when li elements are created, i cache them into a dictionary like object (key is the data-id, value is the node). Out of this object, i generate my array elements. This happens very fast. The array can have a size of up to 4000 nodes. Every jQuery Element in the array only contains one DOM-Element (li).

Answer 1

Edit

After reading your update, and the comments, this Very small one-liner is most likely going to be the answer:

elements.each($.fn.show);

Using the jQ each method to apply (well, internally: call is used) the show method to all elements.

---

The easiest, and fastest way to create a jQuery object from an array of jQuery objects would be this:

var objFromArr = $(jQarr);

I've just tested this in the console:

objFromArr = jQuery([jQuery('#wmd-input'),jQuery('#wmd-button-bar')]);
objFromArr.each(function()
{
    console.log(this);//logs a jQ object
    console.log(this[0]);//logs the DOMElement
});

But having said that: you say elements is an array of jQ objects, but if it's the return value of a selector ($('.someClass')) then really, it isn't: in that case, your loop is "broken":

elements = $('.someClass');
for (var i=0;i<elements.length;i++)
{
    console.log(elements[i]);//logs a DOMElement, not a jQuery object
}
//It's the same as doing:
console.log(elements[0]);
//or even:
console.log($('.someClass').get(0));

But in the end, if you have an array of jQuery objects, and you want to invoke the show method on each and every one of them, I suspect this is the best take:

elements.each($.fn.show);//use the show method as callback