用 juqery 为 div 绑定点击事件来获取每个 div 的索引为例：

html部分的代码如下：

<div style="width: 100px; height: 100px; background: pink;">div1</div><br/>
<div style="width: 100px; height: 100px; background: pink;">div2</div><br/>
<div style="width: 100px; height: 100px; background: pink;">div3</div><br/>
<div style="width: 100px; height: 100px; background: pink;">div4</div><br/>
<div style="width: 100px; height: 100px; background: pink;">div5</div><br/>
    
<script src="js/jquery-3.3.1.js"></script>

js 部分的代码如下：　　

　　首先先查找出所有的  div；

　var divs = $("div");

　　方法一：利用 let 块级作用域的方式；

 for(let i = 0, lens = divs.length; i < lens; i++) {
 　　$(divs[i]).click(function () {
     　　console.log("索引：" + i);
 　　});
};

　　方法二：自定义一个 index 属性缓存；

for(var i = 0, lens = divs.length; i <lens; i ++) {
　　divs[i].index = i;
   $(divs[i]).click(function () {  
   　　console.log("索引：" + this.index);  // 在 jquery 中 this 为最初触发事件源元素,在这表示当前点击的 div 元素;
   });
        };

　　方法三：利用 es6 中的 Array.from() 数组转换的方式查找；

 for(var i = 0, lens = divs.length; i < lens; i ++) {
 　　$(divs[i]).click(function () {  
 　　　　var result = Array.from(divs).indexOf(this);  
        // Array.from() 是从一个类似数组或可迭代对象中创建一个新的数组实例的方法;
        // indexOf() 方法是在数组中可以查找出指定元素第一次出现的索引,默认从下标为 0 的位置开始查找;
 　　　　console.log("索引：" + result);
 　　});
 };

　　方法四：利用闭包的方式；

 for(var i = 0, lens = divs.length; i < lens; i ++) {
 　　divs[i].onclick = callback(i);
 };
 function callback(index) {  
 　　return function () {  
 　　　　console.log("索引：" + index);
 　　};
 };

 

版权声明：本文为xiaoli-s原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/xiaoli-s/p/9506222.html