views:

660

answers:

6

Say I have the following :

var a = $("#a");
var b = $("#b");

//I want to do something as such as the following : 

$(a,b).click(function () {/* */}); // <= does not work

//instead of attaching the handler to each one separately

Obviously the above does not work because in the $ function, the second argument is the context, not another element.

So how can I attach the event to both the elements at one go ?


[Update]

peirix posted an interesting snippet in which he combines elements with the & sign; But something I noticed this :

$(a & b).click(function () { /* */ }); // <= works (event is attached to both)

$(a & b).attr("disabled", true); // <= doesn't work (nothing happens)

From what you can see above, apparently, the combination with the & sign works only when attaching events...?

+2  A: 

You could just put them in an array:

$.each([a, b], function()
{
    this.click(function () { });
});
Greg
Oops, mixed up the syntax with the other each() - try now
Greg
+12  A: 

The jQuery add method is what you want:

Adds more elements, matched by the given expression, to the set of matched elements

var a = $("#a");
var b = $("#b");
var combined = a.add(b)
Gareth
like that :) never know this
Here Be Wolves
A: 

try this: sweet and simple.

var handler = function() {
    alert('hi!');
}
$.each([a,b], function() {
    this.click(handler);
}

BTW, this method is not worth the trouble.

If you already know there are just two of these methods, then I guess the best bet would be

a.click(handler);
b.click(handler);

Cheers!

Here Be Wolves
A: 

I just tried messing around with this, and found something very cool:

$(a & b).click(function() { /* WORKS! */ });

supersweet!

Edit: Now I feel really embarrassed for not testing this properly. What this did, was actually to put the click event on everything... Not sure why it does that, though...

peirix
peirix, see my updated post
Andreas Grech
Crescent Fresh
But that doesn't explain why the whole page got the click event? It should just not be added, then, shouldn't it?
peirix
Crescent Fresh
Is that deliberate? That if something is falsy, it should just run it on the whole document? Sounds very strange, and very susceptible to unknown errors...
peirix
@peirix: jQuery is emulating "default" parameters. It wants to support calling `$()` with no arguments and having it run on the entire `document`. It has been in there for as long as I remember.
Crescent Fresh
+5  A: 

Don't forget either that jQuery selectors support the CSS comma syntax. If you need to combine two arbitrary collections, everyone else's suggestions are on the mark, but if it's as simple as doing something to elements with IDs a and b, use $('#a,#b').

hobbs
yes I know about that, but my issue is when they are already in variables
Andreas Grech
A: 

This question has already been answered, but I think a simpler more streamlined way to accomplish the same end would be to rely on the similarities between jQuery's and CSS's selector model and just do:

$("#a, #b").click(function () {/* */});

I use this frequently, and have never seen it not work (I can't speak for jQuery versions before 1.3.2 though as I have not tested this there). Hopefully this helps someone someday.


UPDATE: I just reread the thread, and missed the comment you made about having the nodes in question already saved off to variables, but this approach will still work, with one minor tweek. you will want to do:

var a = $("#a");
var b = $("#b");
$(a.selector+", "+b.selector).click(function () {/* */});

One of the cool things that jquery does is that it adds a few jquery specific properties to the node that it returns (selector, which is the original selector used to grab that node is one of them). You may run into some issues with this if the selector you used already contained commas. Its also probably arguable if this is any easier then just using add, but its a fun example of how cool jquery can be :).

The Brawny Man