获取for循环中的索引值

最新推荐文章于 2024-05-11 09:34:51 发布

IT-CLASS

最新推荐文章于 2024-05-11 09:34:51 发布

阅读量3.8k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/IT_bar/article/details/108837924

版权

前端专栏收录该内容

39 篇文章 0 订阅

订阅专栏

首先我们看看for循环：

for(var i=0; i< 6; i++){
    console.log(i);
}

相信每个人都知道这个打印的结果吧！
这个结果是：
0
1
2
3
4
5
我们把for循环具体到某一个事例
我们平时点击tab切换时，如何获取索引值呢？
比如这个例子，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>闭包</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        .list{
            width: 100%;
            height: 300px;
            background: #f99;
        }
        .list li{
            width: 100%;
            height: 40px;
            background: yellow;
            margin-bottom: 10px;
        }
        .center{
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <ul class="list">
        <li class="center">1</li>
        <li class="center">2</li>
        <li class="center">3</li>
        <li class="center">4</li>
        <li class="center">5</li>
        <li class="center">6</li>
    </ul>
    <script type="text/javascript">
        var list = document.getElementsByTagName("li");
        //console.log(list.length); //6
         for(var i = 0;i < list.length; i++){
            list[i].onclick = function(){
                console.log(i);
            }
        }
    </script>
</body>
</html>

我想问一哈，这个i打印的值是？
结果是6
因为已经循环完了。
获取索引值的方法有三种：
1.通过index属性

for(var i = 0;i < list.length; i++){
    list[i].index = i;
    list[i].onclick = function(){
        var index = this.index;
        console.log(index);
    }
}

打印的结果是点击所对应的每一项。

2.通过闭包

for( var i = 0; i < list.length; i++){
    (function(index){
        list[i].onclick = function(){
            console.log(i);
        }
    })(i)
}

上面这个就是所谓的闭包，闭包的作用就是函数内部可以获取函数之外的变量和参数。
首先，我们看一下闭包的写法，()(i)
第二个小括号中的i，起始就是函数中的实参，传给了index，
所以点击哪一个就会打印对应的索引值。

3.通过ES6中的let

for(let i = 0;i < list.length; i++){
    list[i].onclick = function(){
        console.log(i);
    }
}

打印的结果就是点击那个li就会显示对应的下标。

IT-CLASS

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
获取for循环中的索引值

首先我们看看for循环：for(var i=0; i< 6; i++){ console.log(i);}相信每个人都知道这个打印的结果吧！这个结果是：0123456我们把for循环具体到某一个事例我们平时点击tab切换时，如何获取索引值呢？比如这个例子，代码如下：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>闭包
复制链接

扫一扫