Question

我有一个3个链接的列表，我想迭代，所以他们每个人都可以做点什么。但是当我使用for-loop时，它只在控制台中给我3，这是列表中的链接数。我想在控制台上向他们展示如下：0, 1, 2;

另外，我如何获得每个链接的索引位置？

没有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>

Answer 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);
}

Answer 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);
}

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

DEMO： http://jsfiddle.net/c8Wdj/5/

可能是IE6 （我不记得）的问题，但这并不重要，因为您希望不再支持其JS环境。 :)

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

的JavaScript：

HTML：

2 个答案: