How do I store multiple jQuery selectors in a javascript variable?

Question

Obviously it's a good idea to store jQuery selectors in variables if they are used more than once ( not a good idea if used only once).

My question is, how do you store multiple selectors, that are used interchangeably, in a variable.

For instance, let's say I select $('#object1, #object2) , then later on I select `$('#object1'). How would I create a variable that can be combined with other variables to create multiple selectors.

If I were to write it like this:

var object1 = "#object1";
var object2 = "#object2";

$(object1  + "," + object2);

I would only be referencing the string #object1 , and not the actual selector.

So how do I store multiple selectors in variables, so they can be used interchangeably?

Answer 1

The problem is not the selector string , the problem is the query of the DOM element. "Problem" means, it's expensive. That is why you should only query an element once and store a reference to it.

var object1 = $('#object1'),
    object2 = $('#object2');

object1.some_method();

update

In reference to your comment:

jQuery offers the .add() ^help method which allows to concat jQuery objects:

object1.add(object2).method();

Answer 2

Not completely sure I understand what you mean. You want to store the jQuery objects so you don't have to continually search for them like some sort of cache?

var cache = new Object();
cache['#object1'] = $('#object1');
cache['#object2'] = $('#object2');

To retrieve the jQuery values, you'd merely have to call cache['#object1'] .

Answer 3

You can use .add() :

var object1 = $('#object1'), object2 = $('#object2');

object1.add(object2).addClass('couple');

Or,

var multiple = [object1[0], object2[0], ...];

$(multiple).addClass('party');

Answer 4

Why don't you use the easy way.

var severalVar = 'h1,h2,h3,h4,h5,h6';
 $(severalVar).hide()

Answer 5

a selector is a string when passed to the $() fn. returns a collection of Elements that match the selector. So there is nothing wrong with this code.

Your code can also be written as,

var object1 = "#object1",
    object2 = "#object2";

$(object1).add(object2).doSomething();

or it can be further optimized as,

var object1 = $('#object1'),
    object2 = $('#object2');

object1.add(object2).doSomething();

where doSomething can be a jQuery or jQuery plugin defined method.