Question

I know that it’s faster to do the following:

var $header = $("#header");
$header.css({color:"#ff0000"});
$header.find("a").addClass("foo");

Instead of:

$("#header").css({color:"#ff0000"});
$("#header a").addClass("foo");

Because jQuery doesn’t need to find the elements again in the DOM as we have direct reference to them.

Let’s say that I have this:

var $header_elements = $("#header li");
var $footer_elements = $("#footer li");

And I use both individually for a few jQuery manipulations. But then, I need to do something on both. Using selector, I would do this:

$("#header li, #footer li").css({color:"#ff0000"});

But then, the DOM needs to be parsed again to find matching elements. Is there a way to use my previously declared variables instead of a new selector? Something like the following (which is not working, I know, it’s to give an idea of what I’m looking for):

$($header_elements + $footer_elements).css({color:"#ff0000"});

I think that the selector returns some kind of array or object. What I’m looking for is a way to merge those. Anyone know if this is possible and how to do it?

Thanks for your help!

Answer 1

Just use the add method:

$header_elements.add($footer_elements).css({color:'#ff0000'});

Given a jQuery object that represents
a set of DOM elements, the .add()
method constructs a new jQuery object
from the union of those elements and
the ones passed into the method. The
argument to .add() can be pretty much
anything that $() accepts, including a
jQuery selector expression, references
to DOM elements, or an HTML snippet.