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?

What's wrong with that code? I think it would work just fine. — kprevas
– kprevas, Commented Jan 27, 2011 at 15:24
it's storing just a string as a var, not the actual selector. — Jared
– Jared, Commented Jan 27, 2011 at 15:38
To be precise, the selector is the string, while what you're referring to is a jQuery object. — David Tang
– David Tang, Commented Jan 27, 2011 at 15:48

jAndy · Accepted Answer · 2011-01-27 15:47:32Z

8

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();

edited Jan 27, 2011 at 15:47

answered Jan 27, 2011 at 15:24

jAndy

237k57 gold badges313 silver badges363 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jared Over a year ago

That's easy enough to do, but how would you apply some_method(); to #object1 and #object2 ?

Neil · Accepted Answer · 2011-01-27 15:43:41Z

3

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'].

answered Jan 27, 2011 at 15:43

Neil

5,79727 silver badges37 bronze badges

2 Comments

Livingston Samuel Over a year ago

I'd recommend that you use the Object literal, {} to initialize an object rather than creating a new instance of Object. Eg. var cache = {};. This executes faster and saves a few bytes.

Neil Over a year ago

Thought it was the same. Thanks for the tip.

David Tang · Accepted Answer · 2011-01-27 15:46:12Z

1

You can use .add():

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

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

Or,

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

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

answered Jan 27, 2011 at 15:46

David Tang

93.8k32 gold badges169 silver badges149 bronze badges

Comments

Livingston Samuel · Accepted Answer · 2011-01-27 15:50:28Z

0

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.

answered Jan 27, 2011 at 15:50

Livingston Samuel

2,4222 gold badges20 silver badges35 bronze badges

Comments

user3631047 · Accepted Answer · 2012-07-24 17:18:07Z

0

Why don't you use the easy way.

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

edited Jul 24, 2012 at 17:18

answered Jul 22, 2012 at 16:00

user3631047

3,4065 gold badges25 silver badges35 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related