jQuery adding an effect to many divs in one go

Question

Is it possible to apply a jQUery method such as .hide() to many divs with different id parameters in one go.

The example for a single div is:

$("#action-div").click( function() { $("#some-div-to-hide").hide("fast"); } );

Can this be done for many divs with different ids, without having to handle the .click event many times.

Answer 1

You probably want to use a class attribute on the divs you want to operate on, then specify the class in the selector.

<div class="actiondiv" ...>

and then

$(".actiondiv").click(...)

Answer 2

The simplest method is give all the ids the same class and later:

$(".some_class").click( function(){.....});

Answer 3

Comma seperate the list of ID's.

$("#action-div, #anotherId, #yetAnotherId").click(function(){

});

Answer 4

You could always apply a single class to these items, and select it based off the class:

$(".action-class").click( function() { $("#some-div-to-hide").hide("fast"); } );

Answer 5

If you want to have the click event attached to all divs, use a common class (<div class="clickhidden">):

$(".clickhidden").click( function() { $("#some-div-to-hide").hide("fast"); } );

If you want one click to hide multiple classes, attach the class to the target:

$("#action-div").click( function() { $(".clickhidden").hide("fast"); } );

Combinations are also possible.