js获取当前点击元素的索引

时间:2021-06-26 14:41:17

以ul下的li元素为例;获取li的索引,代码如下:

 <ul id="list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

方法1:

把每个li元素加上index属性,每个li被点击时获取index属性即可

var ul =  document.getElementById("list");
var list = ul.querySelectorAll('li');
for (var i = ; i < list.length; i++) {
list[i].index = i;
}
ul.addEventListener('click',function(e){
console.log(e.target.index);
})

方法2:

获取ul下的所有li,找到被点击li在所有li中的位置

ul.addEventListener('click',function(e){
var item = e.target;
var lists = Array.from(ul.querySelectorAll('li'));
console.log(lists.indexOf(item));
})