js关于正确获取索引的方法

最新推荐文章于 2024-03-27 20:31:12 发布

大闸蟹~

最新推荐文章于 2024-03-27 20:31:12 发布

阅读量3.2k

点赞数

分类专栏： js 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/YCHH1/article/details/123395938

版权

js 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

这篇博客探讨了在JavaScript中如何正确获取HTML列表元素的索引。文章通过三种方法进行阐述：利用this指向、使用闭包(IIFE)以及ES6的let关键字。每个方法都围绕解决循环中获取索引时的常见问题，确保在点击事件中能够准确显示对应的索引值。

摘要由CSDN通过智能技术生成

利用改变this 指向、闭包(IIFE)、ES6 中的 let 关键字即可

<ul type="disc" id="list">
    <li>1关于 获取索引的问题</li>
    <li>2关于 获取索引的问题</li>
    <li>3关于 获取索引的问题</li>
    <li>4关于 获取索引的问题</li>
    <li>5关于 获取索引的问题</li>
    <li>6关于 获取索引的问题</li>
</ul>

<script>
    // 获取索引的问题
    var lis = document.getElementsByTagName("li");
    console.log(lis);


    // 利用  this 指向获取索引的问题
    // for(var i=0;i<lis.length;i++){
    //     lis[i].index= i
    //     lis[i].οnclick=function(){
    //         console.log("当前对应的 li 的索引为",this.index);
    //     }
    // }


    // 利用闭包实现正确获取索引的问题
    // for(var i = 0;i<lis.length;i++){
    //     (function(j){
    //         lis[j].onclick = function(){
    //             console.log("当前对应的 li 的索引为",j);
    //         }
    //     })(i)
    // } 

    // 利用 es 6  的 let  关键字坚解决正确获取索引的问题
    for (let i = 0; i < lis.length; i++) {
        lis[i].onclick = function () {
            console.log("当前对应的 li 的索引为", i);
        }
    }

</script>