从 for in 循环调用增量器答案

【问题标题】：Calling incrementer from a for in loop从 for in 循环调用增量器
【发布时间】：2012-08-18 05:56:06
【问题描述】：

我在这个循环中调用增量器 i 来识别我当前的元素时遇到了一些麻烦。 Firebug 给了我错误"li[i].addEventListener is not a function"。

document.addEventListener("DOMContentLoaded", function(){

var li = document.getElementsByTagName('li');

for(var i in li){
    li[i].addEventListener('click', function(){
        alert('yey');
    });
    }
});

奇怪的是，如果我打电话给

alert(li[i].getAttribute('id')

我收到了 id 提醒我，但如果我随后使用

var id=li[i].getAttribute('id');
document.getElementById(id).addEventListener(blah);

我得到相同的“不是函数”错误。这是for循环吗？我注意到alert(i); 在循环结束时调用了一些额外的东西，那么在 for in 循环中使用增量器有什么不同的方法吗？顺便说一下，我使用的列表是这样的：

<ul>
    <li id=pomp>
        stuff
    </li>
    <li id=and>
        and
    </li>
    <li id=circumstance>
        things
    </li>
</ul>

【问题讨论】：

标签： javascript loops increment getelementsbytagname

【解决方案1】：

这就是为什么你必须避免使用for in 循环

for(var i=0;i<li.length;i++){
    li[i].addEventListener('click', function(){
        alert('yey');
    });
}

当你使用 for in 时，i 不是你期望的整数，而是节点列表的一个属性。

【讨论】：

【解决方案2】：

正如@lbu 所指出的，您应该使用for (decl; test; inc) 来遍历数组。

不过，这也是使用委托的好地方，因为每个<li> 都必须是<ul> 的直接后代，您可以将事件处理程序放在那里，并为您的浏览器提供更少的工作要做：

var ul = document.getElementsByTagName('ul');

for (var i = 0, n = ul.length; i < n; ++i) {
    ul[i].addEventListener('click', function(ev) {
        alert(ev.target.id);
    });
}

见http://jsfiddle.net/2mk3w/

【讨论】：

【解决方案3】：

试试这个方法

for(var i in li){
    i.addEventListener('click', function(){
        alert('yey');
    });
    }
});

【讨论】：

如果它可以这样工作，那就太酷了，但不幸的是，这不起作用。