遍历元素并添加索引号

Iterating through elements and adding index number

本文关键字：索引 添加 元素 遍历      更新时间：2023-09-26

为什么此代码在单击时会将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>

我必须添加另一个循环吗？我很困惑。谢谢

回调中的i与递增的i相同。当这些回调函数被触发时，i的值将是8，因此所有回调都将添加相同的类。

通常避免在循环中创建事件处理程序。一次选择这些元素并为所有元素添加一个事件处理程序要容易得多：

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

jsfiddle 上的演示

主要问题是您期望处理程序的参数作为索引，但事实并非如此，它是eventObject。

你最好使用这样的.each（）函数：

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

我编辑了你的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

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

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

因为当时点击事件是火灾。变量i是结束循环，它得到值4。解决方案是使用必须获取h2元素的索引并分配给类。我有一点变化：

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

jsfiddle 上的演示

相关文章：