Tutorial :Add jQuery click handler to multiple elements?



Question:

I need to have a for loop inside my jQuery.

Example:

  for(i=0;i<counter;i++)     {      $("div"+i+"").click(function(){//some code});     }  

How can I accomplish this?


EDIT:

This code was posted by the OP in a comment to one of the answers:

$("#displayPanel div").click(function (){ alert($(this).attr("id")); }     <div id="displayPanel" class="displayPanel">     <div id="heading"> Display Panel </div> <br/>     <div id="save" class="saveClass"></div> <br/>     <div id="field1" class="my">       <label id="labelstr1">Untitled1</label>       <input id="inputstr1" type="text"/>     </div>     <div id="field2" class="my">       <label id="labelstr2">Untitled1</label>       <input id="inputstr2" type="text"/>     </div>   </div>  

The alert is showing me the id for the first two divs and not for the field1 and field2.


Note:

The Field1 and Field2 divs are created on the fly.


Solution:1

You can put the divs with a common class

<div id="d1" class="your_css_class your_control_class">  <div id="d2" class="your_css_class your_control_class">  <div id="d3" class="your_css_class your_control_class">  <div id="d4" class="your_css_class your_control_class">  <div id="d5" class="your_css_class your_control_class">    $(".your_control_class").click(function(){     var div_id=$(this).attr("id"); // gives you the ID of the clicked div     if(div_id==="d1") functionForDiv1();     else if(div_id==="d2") functionForDiv2();     ...  });  

EDIT:

If you have everything inside that big div then you can do:

$("#displayPanel > div").click(function(){  ...  


Solution:2

The loop seems unnecessary since the selector for div will apply to all divs.

$("div").click(function(){    //this will apply to any div you click on the page    //for example:    $(this).css('color','red'); //change the color of the div clicked to red  });  

EDIT: Since you mention in the edit that #field1 and #field2 are created on the fly, then you need to use .live() to bind the click event as shown below:

$("#displayPanel div").live('click', function(){    alert($(this).attr('id'));  });  


Solution:3

You can, for example, loop through all div's like this:

$("div").each(function() {      $(this).hide(); // this points to the current element  });  


Solution:4

Yes you can have a for loop in jQuery, but by the look of your question, you might not need it. When you use

$('div').click(function(). { ... });  

You can bind the function as an event handler for all divs with one command. You can also use context, a class name or other attributes to filter the divs to which the event handler is applied.

If you wanted to perform a different action for each div, you would be best to have a unique ID on each div and then bind an event handler using

$('#divId').click(function() { ... });  


Solution:5

Assuming the html is

<div class="module">    <div id="header1">h</div>    <div id="content1">c</div>  </div>  <div class="module">    <div id="header2">h</div>    <div id="content2">c</div>  </div>  <div class="module">    <div id="header3">h</div>    <div id="content3">c</div>  </div>  

You can do loop this way with jquery: For example, when you click header, the content is hidden.

$(".module").each(function(index){     $("#header"+index).click(function(){        $("content"+index).hide()     });  });  

You may want to have a look at jQuery.each( collection, callback(indexInArray, valueOfElement) ) function http://api.jquery.com/jQuery.each/


Solution:6

Do these divs have a common parent, attribute, or anything else? Matching by IDs of a certain form (i.e. divXYZ in your case) probably isn't the easiest/most obvious thing to do. The API documentation for Selectors has a complete list of the different ways you can select elements. Choose whichever is most appropiate for, and the JQuery becomes much simplified.

Here's an example for selecting divs with a common parent:

$("#parent > div").click(function() {      // some code  });  

And for selecting divs with a common attribute (if they don't have a common parent one solution could be giving them each a cusotm attribute):

$("div[fooAttribute]").click(function() {      // some code  });  

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »