javascript - 如何在鼠标悬停时获取元素的索引值？

Question

我试图在鼠标悬停时获取元素的索引号。
我可以使用 jQuery 轻松完成此操作，但 native javascript 是防弹的/:

Here is jsFiddle

var ele = document.getElementsByClassName('sample')[0];

for(i=0; i<ele.children.length;i++){
    ele.children[i].onmouseover = function() {
        this.style.background='red';
        alert(i);//can't get the value
    }
}

<ul class="sample">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Answer 1

使用立即函数来修复当前迭代的 i 值:

for(i=0; i<ele.children.length;i++){
    (function(i) {
        ele.children[i].onmouseover = function() {
            this.style.background='red';
            alert(i);
        }
    }(i));
}

这是更新的fiddle .