遍历元素并添加索引号

Question

为什么此代码在点击后会将class=hello5添加到所有h2元素？有4个h2元素。

for (i=0; i < $('h2').length; i++) { 
    $('#' + i).click(function(index) { 
    $(this).addClass('hello' + i) 
    }) 
}; 

我希望它添加class=hello0，class=hello1等

HTML：

<h2 id="0">0</h2> 
<h2 id="1">1</h2> 
<h2 id="2">2</h2> 
<h2 id="3">3</h2> 

我一定要添加另一个循环？我很困惑。谢谢。

Answer 1

i在回调是，你递增相同i。当这些回调函数被触发时，i的值将是8，所以所有的回调函数都会添加相同的类。

避免在循环中创建事件处理程序。这是很容易，只是一次选择这些元素，并添加一个单一事件处理所有的人：

$('h2').click(function() { 
    $(this).addClass('hello' + this.id); 
}); 

Demo on jsfiddle

Answer 2

主要问题是，您期待处理程序的参数作为索引，但它不是，它是eventObject。

您更好地使用。每（）函数是这样的：

$("h2").each(function(index, item){ 
    $(item).click(function(e){ 
     e.preventDefault(); 
     $(this).addClass("hello" + index); 
    }) 
}) 

Answer 3

我编辑你的HTML片段：

<h2 id="id0">0</h2> 
<h2 id="id1">1</h2> 
<h2 id="id2">2</h2> 
<h2 id="id3">3</h2> 

试试这个代码：

$('h2[id^="id"]').click(function(index){ 
    var idx = $(this).index(); 
    $(this).addClass('hello' + idx) 
}); 

Fiddle here

Answer 4

http://jsfiddle.net/Jbh3q/203/

$("h2").each(function(index,element){ 
    $(element).addClass("hello" + index); 
}) 

Answer 5

由于时间点击事件在很火。变量i是完成循环，它会得到值4.解决方案是使用必须得到索引h2元素并分配给类。我有一点点的变化：

$().ready(function() { 
    for (i = 0; i < $('h2').length; i++) { 
     $('#' + i).click(function (index) { 
      $(this).addClass('hello' +$("h2").index($(this))) 
     }) 
    }; 
}) 

Demo on jsfiddle