JavaScript for loop只给出元素的数量

javascript for loop only give the number of elements

本文关键字：元素 for loop JavaScript      更新时间：2023-09-26

我有一个包含 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>​

​

for 没有作用域，所以当你控制台.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);
}

一种常见的方法是在循环的每次迭代中创建新的变量作用域，方法是调用函数，将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环境。 :)

相关文章：