Question

How do I go about doing this?

$(function() {

   var foo = $('#foo'),
       bar = $('#bar');

    $('body').click(function() {

        $(foo,bar).css({color: 'red'}); 

    });

});

Demo: http://jsfiddle.net/each/RGZ4Z/ – Only foo becomes red

Edit: Can i stress the fact that I’m aware I could easily do:

$('#foo,#bar').css({color: 'red'});

I’m simply asking about the usage of variables…

Answer 1

Probably, what you want is this:

foo.add(bar).css({color: 'red'});

Here’s a demo piece of code that shows how this can work: http://jsfiddle.net/jfriend00/3Ep6J/.

There are three choices I can think of depending upon what you want:

1. var items = $('#foo, #bar')
2. $('#foo, #bar').css({color: 'red'});
3. foo.add(bar).css({color: 'red'});

And, more detail on each option:

1) You can either just create one jQuery object in the beginning that has both sets of objects in it like this:

var objs = $('#foo, #bar');

and then later do this:

objs.css({color: 'red'}); 

2) Or just do it all at once:

$('#foo, #bar').css({color: 'red'}); 

3) Or, if you already have separate jQuery objects for foo and bar, you can add the items from one jQuery object to the other and then carry out your operation:

var foo = $('#foo'),
    bar = $('#bar');

and then later, do this:

foo.add(bar).css({color: 'red'}); 

Note: somewhat counterintuively, option 3) does not modify the foo jQuery object, the add method returns a new jQuery object with the items from bar added to it.