javascript for循环只给出元素的数量答案

【问题标题】：javascript for loop only give the number of elementsjavascript for循环只给出元素的数量
【发布时间】：2012-05-26 16:41:17
【问题描述】：

我有一个包含 3 个链接的列表，我想对其进行迭代，这样每个链接都可以做一些事情。但是当我使用for循环时，它只会在控制台中给我3，这是列表中的链接数。我希望控制台像这样显示他们每个人：0, 1, 2;

另外我怎样才能得到每个链接的索引位置？

在此处查看代码：http://jsfiddle.net/c8Wdj/

请不要使用 jQuery 或任何库...

JavaScript：

(function(){
    var triggers = document.getElementById('some-list').getElementsByTagName('a');

    for (var i = 0, max = triggers.length; i < max; i += 1) {
        triggers[i].addEventListener('mouseenter', function(e) {

            console.log(i);

        }, false);
    }

}());

HTML：

<ul id="some-list">
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
</ul>

【问题讨论】：

stackoverflow.com/questions/1552941/…的可能重复

标签： javascript for-loop closures

【解决方案1】：

for 没有作用域，因此当您使用 console.log(i) 时，它使用 i 的最新值。试试这个：

for (var i = 0, max = triggers.length; i < max; i += 1) {
    (function(num){
        triggers[i].addEventListener('mouseenter', function(e) {
            console.log(num);
        }, false);
    })(i);
}

【讨论】：

【解决方案2】：

一种常见的方法是在循环的每次迭代中创建一个新的变量范围，方法是调用一个函数，将i 传递给它，并返回一个引用该值的函数。

但是，如果您只是需要引用一些轻量级数据，例如数字，另一种方法是简单地在元素上放置一个 expando 属性。

for (var i = 0, max = triggers.length; i < max; i += 1) {
    triggers[i].__i__ = i;
    triggers[i].addEventListener('mouseenter', function(e) {
        console.log(this.__i__);
    }, false);
}

这不需要嵌套变量范围的开销。

演示： http://jsfiddle.net/c8Wdj/5/

可能是 IE6 的问题（我不记得了），但这无关紧要，因为您希望不再支持它的 JS 环境。 :)

【讨论】：