Is it possible to use multiple variables instead of selectors in jQuery

Question

I know it is faster to do the following:

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

Instead:

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

Since jQuery does not need to search for elements in the DOM, since we have a direct link to them.

Say I have this:

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

And I use both separately for several jQuery manipulations. But then I need to do something on both. Using a selector, I would do the following:

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

But then the DOM needs to be analyzed again to find the appropriate elements. Is there a way to use my previously declared variables instead of a new selector? Something like the following (which does n't work, I know, this gives an idea of ​​what I'm looking for):

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

I think the selector returns some kind of array or object. What I'm looking for is a way to combine them. Does 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 the jQuery object that represents the set of DOM elements, the .add () method creates a new jQuery object from combining these elements and those that passed into the method. the argument for .add () can be pretty much everything that $ () accepts, including a jQuery selector expression, references to DOM elements, or an HTML snippet.

Answer 2

I found solutions a few minutes after posting this. For those who are interested, here it is:

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

It's faster? I don’t know yet, I will need to run some tests to find out.

EDIT:

I tested it with JS Fiddle here: http://jsfiddle.net/bgLfz/1/

I tested using a selector every time, a variable for both selectors, variables with $ .merge () and using .add (). Each test was performed 1000 times.

The results on my side are as follows (from faster to slower):

• Using $ .merge () (average 7 ms)
• Using both variables one by one (on average 10 ms, but the code needs to be duplicated)
• Using .add () (16 ms average)
• Using selectors every time (average 295 ms)

Answer 3

You can use the add or merge method:
Add

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

mergers

 $.merge($header_elements, $footer_elements).css({color:"#f00"}); 

Both work, but add more efficiently . Source: http://jsperf.com/add-vs-merge

Credit: I supported the answers of @GenericTypeTea and @Gabriel, made a summary of both, compared them and here is the result.

Answer 4

Pass an array of links:

 $([$header_elements, $footer_elements]).css({color:"#ff0000"}); 

Answer 5

It doesn't matter how smart you are, you will do something like (even if it worked):

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

or execute them separately:

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

since jquery will internally go through the provided arguments using each() .

If the principle is more inspired by DRY than performance, you can create a function:

 function makeThemRed( el ) {el.css({color:"#ff0000"})} 

and then

 makeThemRed($header_elements); makeThemRed($footer_elements); 

or even:

 function makeThemRed() { var l=arguments.length, o=0; while (o<l) { arguments[o++].css({color:"#ff0000"}) } } 

and then

  makeThemRed($header_elements, $footer_elements); //any number of parameters 

Answer 6

The thing with using "merge" is that it is limited to two two selectors, and using "add" will be so messy if it is more than two, so if it is more than two, you should use "each" as follows:

 $([selector1, selector2, selector3, .....etc]).each(function(){ // your code here }); 

Answer 7

You can always set all elements to one variable:

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