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

以ul下的li元素为例；获取li的索引，代码如下：

 <ul id="list">
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
 </ul>

方法1:

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

var ul =  document.getElementById("list");
var list = ul.querySelectorAll('li');
for (var i = 0; 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));
})

 

转载于:https://www.cnblogs.com/renbo/p/9533830.html