xiaoli-s

用 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);
   };
 };

 

相关文章: