利用JS输出ul下li的index索引值

最新推荐文章于 2021-07-13 16:47:34 发布

安小漠HG

最新推荐文章于 2021-07-13 16:47:34 发布

阅读量1.2w

点赞数 6

CC 4.0 BY-SA版权

分类专栏： js 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/anxiaomo1/article/details/68921367

js 专栏收录该内容

3 篇文章

订阅专栏

如何利用原生JS输出ul下li的index索引值，如果按以下的写法写，则每次点击输出的都是最后一个元素的索引。
function(e){}的匿名函数，在执行时，每一个都会创建一个新的作用域。这些匿名函数不会立即执行，仅仅是被定义，只有在点击时才执行，被当做参数传入addEventListener函数。所以在执行时i的值已经变为最后一个索引值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>打印索引</title>
</head>
<body>
<ul>
    <li>click</li>
    <li>click</li>
    <li>click</li>
    <li>click</li>
    <li>click</li>
</ul>
<script>
   var nodeList = document.getElementsByTagName('li');
   for (var i = 0; i < nodeList.length; i++) {
       nodeList[i].addEventListener("click", function(e) {
            alert(i);
        }, false);
   }
</script>
</body>
</html>

实现方法

1.利用闭包实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>打印索引</title>
</head>
<body>
<ul>
    <li>click</li>
    <li>click</li>
    <li>click</li>
    <li>click</li>
    <li>click</li>
</ul>
<script>
   var nodeList = document.getElementsByTagName('li');
   for (var i = 0; i < nodeList.length; i++) {
    (function(j){
        nodeList[j].addEventListener("click", function(e) {
            alert(j)
        }, false);
    })(i) ;
}
</script>
</body>
</html>

2.ES6实现
我们也可以利用ES6的let来实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>打印索引</title>
</head>
<body>
<ul>
    <li>click</li>
    <li>click</li>
    <li>click</li>
    <li>click</li>
    <li>click</li>
</ul>
<script>
   var nodeList = document.getElementsByTagName('li');
   for (let i = 0; i < nodeList.length; i++) {
       nodeList[i].addEventListener("click", function(e) {
            alert(i);
        }, false);
   }
</script>
</body>
</html>

3.利用事件委托机制
如果li较少的话，利用上面方式实现是可以的，但是如果li的数量过多，为每个li添加事件侦听就会对页面性能产生很大的影响，我们可以采用委托实现。
利用Array.prototype.slice.call(nodeList)的作用是将具有length属性的元素转为数组，这样可利用indexOf方法获取li的索引值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>打印索引</title>
</head>
<body>
<ul>
    <li>click</li>
    <li>click</li>
    <li>click</li>
    <li>click</li>
    <li>click</li>
</ul>
<script>
    var nodeList = document.getElementsByTagName('li') ,
        arrNodes = Array.prototype.slice.call(nodeList) ,
        nodeUls = document.getElementsByTagName('ul') ;
    nodeUls[0].addEventListener("click",function(event){
        var event = event || window.event;
        var target = event.target || event.srcElement;
        alert(arrNodes.indexOf(target))
    },false);
</script>
</body>
</html>