Добавить обработчик кликов jQuery к нескольким элементам?

Question

Мне нужно, чтобы внутри моего jQuery был цикл for.

Пример:

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

Как мне это сделать?

---

EDIT:

Этот код был опубликован ФП в комментарии к одному из ответов:

$("#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>

В предупреждении указывается идентификатор для первых двух div с, а не для field1 и field2.

---

Примечание:

Field1 и Field2 div s создаются на лету.

Answer 1

Вы можете поместить div с общим классом

<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:

Если у вас есть все внутри этого большого div, то вы можете сделать:

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

Answer 2

Цикл кажется ненужным, поскольку селектор для div будет применяться ко всем div.

$("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
});

РЕДАКТИРОВАТЬ : Поскольку в редактировании вы упоминаете, что # field1 и # field2 создаются на лету, вам необходимо использовать .live () , чтобы связать событие нажатия как показано ниже:

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

Answer 3

Например, вы можете перебрать все элементы div следующим образом:

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

Answer 4

Предполагая, что HTML равен

<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>

Вы можете сделать цикл таким образом с помощью jquery: Например, при нажатии на заголовок содержимое скрыто.

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

Возможно, вы захотите взглянуть на функцию jQuery.each (collection, callback (indexInArray, valueOfElement)) http://api.jquery.com/jQuery.each/

Answer 5

Да, вы можете иметь цикл for в jQuery, но, судя по вашему вопросу, он вам может не понадобиться. Когда вы используете

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

Вы можете связать функцию как обработчик событий для всех элементов div одной командой. Вы также можете использовать context , имя класса или другие атрибуты , чтобы отфильтровать div, к которым применяется обработчик события.

Если вы хотите выполнить разные действия для каждого div, вам лучше иметь уникальный идентификатор для каждого div, а затем связать обработчик событий, используя

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

Answer 6

Есть ли у этих div общий родитель, атрибут или что-то еще? Сопоставление по идентификаторам определенной формы (например, divXYZ в вашем случае), вероятно, не самая простая / очевидная вещь, которую нужно сделать. Документация API для селекторов содержит полный список различных способов выбора элементов. Выберите наиболее подходящий вариант, и JQuery станет намного проще.

Вот пример выбора div с общим родителем :

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

И для выбора div с общим атрибутом (если у них нет общего родителя, одно решение может дать каждому атрибут cusotm):

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