遍历数组时的JS循环位置[重复]答案

【问题标题】：JS loop position while iterating through an array [duplicate]遍历数组时的JS循环位置[重复]
【发布时间】：2012-08-22 10:58:06
【问题描述】：

可能重复：
Javascript closure inside loops - simple practical example

我想在遍历列表项数组时输出数组中的悬停位置。但是我的逻辑是完全错误的，因为在循环完成时'i'总是设置为数组的长度，所以我总是得到数组长度值而不是数组中的所需位置。

我需要获取包含相应列表项编号的警报。

HTML

<ul>
    <li class='listItem'>listitem1</li>
    <li class='listItem'>listitem2</li>
    <li class='listItem'>listitem3</li>
</ul>

var arr = document.getElementsByClassName('listItem');
for (var i = 0; i < arr.length; i++) {
    arr[i].onmouseover = function() {
        alert(i);
    }
}

http://jsfiddle.net/EHcDp/4/

提前致谢！

【问题讨论】：

标签： javascript html loops for-loop

【解决方案1】：

var arr = document.getElementsByClassName('listItem');
for (var i = 0; i < arr.length; i++) {
    (function(i) {
        arr[i].onmouseover = function() {
            alert(i);
        }
    }(i));
}

阅读this duplicate 了解其工作原理/方式。

【讨论】：

【解决方案2】：

你需要一个closure：

var arr = document.getElementsByClassName('listItem');
for (var i = 0; i < arr.length; i++) {
    arr[i].onmouseover = (function(x) {
        return function() {
            alert(x);
        };
    }(i));
}

【讨论】：