Apply CSS to multiple elements in variables

Question

I have this:

var $e1 = $('#e1');
var $e2 = $('#e2');
var $e3 = $('#e3');

This doesn't work:

var $all = [$e1, $e2, $e3];
$($all).css('background', '#ff0000');

How should I do this, while reusing $el1, $el2, $el3?

I don't want to do:

$('#e1, #e2, #e3')

This is probably very simple to do, but I don't know what to search for to find out.

The $-prefix in variable names is for jQuery objects. Don't use it for regular arrays, it will only confuse you. — Šime Vidas
– Šime Vidas, Commented Jan 21, 2011 at 14:27
@Šime Vidas: Can you explain a little better when I should and shouldn't start a variable with $ according to "jQuery style". — bmaster
– bmaster, Commented Jan 21, 2011 at 14:42
This is an array: [1, 2, 3]. This is a jQuery object: $('div'). When choosing a variable name, you use the $-prefix for those variables which values are jQuery objects. For instance: var x = true; var y = [1,2,3]; var $z = $('#z'); — Šime Vidas
– Šime Vidas, Commented Jan 21, 2011 at 14:52

David Tang · Accepted Answer · 2011-01-21 14:22:42Z

3

You can do this:

var $all = $e1.add($e2).add($e3);

Or this (looks a little obtuse, but it's the correct way - you have to extract the node from the jQuery object first with [0]):

var $all = $([$e1[0], $e2[0], $e3[0]]);

Note: in my examples, $all is already a jQuery object, so you don't need to wrap it again like this: $($all). Just do:

$all.css('background', '#ff0000');

edited Jan 21, 2011 at 14:22

answered Jan 21, 2011 at 14:10

David Tang

93.8k32 gold badges169 silver badges149 bronze badges

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

1 Comment

bmaster Over a year ago

[0] is what I was really looking for. Thanks for the explanation.

Exelian · Accepted Answer · 2011-01-21 14:09:12Z

0

Edit: even better:

var $e1 = $('#e1');
var $e2 = $('#e2');
var $e3 = $('#e3');
var all = $e1.add($e2).add($e3);
all.css('background', '#ff0000');

answered Jan 21, 2011 at 14:09

Exelian

5,9281 gold badge33 silver badges51 bronze badges

Comments

jAndy · Accepted Answer · 2011-01-21 14:11:02Z

0

$e1.add($e2).add($e3)

is another way of merging different elements/jQuery objects.

Reference: .add()

answered Jan 21, 2011 at 14:11

jAndy

237k57 gold badges313 silver badges363 bronze badges

Comments

Razvan Caliman · Accepted Answer · 2011-01-21 14:12:16Z

0

Edit: wrap array in jQuery instance and iterate through its elements

all = [$e1, $e2, $e3];

$(all).each(function(index, element){
   element.css('background', '#ff0000');
})

answered Jan 21, 2011 at 14:12

Razvan Caliman

4,6536 gold badges23 silver badges25 bronze badges

Comments

javiertoledos · Accepted Answer · 2011-01-21 14:12:23Z

0

Well if you don't want to use a selector, apply the style to each element of the array.

for(i = 0; i < $all.length; i++)
    $all[i].css('background', '#ff0000');

answered Jan 21, 2011 at 14:12

javiertoledos

99111 silver badges17 bronze badges

Comments

hellatan · Accepted Answer · 2011-01-21 14:14:01Z

0

you can do what you have in your example:

var $all = [$e1, $e2, $e3],
    i = $all.length;

for(; i--;) {
    $all[i].css('background', '#f00');
}

answered Jan 21, 2011 at 14:14

hellatan

3,5873 gold badges31 silver badges38 bronze badges

Comments

Pedro Soares · Accepted Answer · 2012-10-04 12:09:09Z

0

It seems you ca do just this:

$(deleteBtn).add(copyBtn).add(moveBtn).css('background', 'white');

As it says here http://api.jquery.com/add/

answered Oct 4, 2012 at 12:09

Pedro Soares

6232 gold badges10 silver badges15 bronze badges

Collectives™ on Stack Overflow

Apply CSS to multiple elements in variables

7 Answers 7

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related