Question

我需要在jQuery中有一个for循环。

示例：

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

我该如何做到这一点？

编辑：

此代码由OP发布，对其中一个答案发表评论：

$("#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的ID，而不显示field1和field2的ID。

注意：

即时创建Field1和Field2 div。

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

编辑：

如果你拥有那个大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()绑定click事件，如下所示：< / p>

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

是的，您可以在jQuery中使用for循环，但从您的问题看，您可能不需要它。当你使用

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

您可以使用一个命令将该函数绑定为所有div的事件处理程序。您还可以使用context，class name或other attributes来过滤应用事件处理程序的div。

如果你想为每个div执行不同的操作，你最好在每个div上有一个唯一的ID，然后使用

绑定一个事件处理程序

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

Answer 5

假设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（集合，回调（indexInArray，valueOfElement））函数http://api.jquery.com/jQuery.each/

Answer 6

这些div是否有共同的父级，属性或其他内容？按特定形式的ID匹配（例如，在您的情况下为divXYZ）可能不是最容易/最明显的事情。 Selectors的API文档包含了您可以选择元素的不同方法的完整列表。选择最合适的选项，JQuery变得更加简化。

以下是选择共同父级的div的示例：

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

用于选择具有公共属性的div（如果他们没有共同的父级，则一个解决方案可以为每个人提供cusotm属性）：

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

将jQuery单击处理程序添加到多个元素？

编辑：

注意：

6 个答案: