原生js怎么判断当前节点是第几个节点？

Question

<ul id="ul">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<script>
    let ul = document.getElementById('ul');
    ul.onclick = (e) => {
        let target = e.target;
        let parent = target.parentNode;
        for(let i = 0; i < parent.children.length; i++){
            if(target == parent.children[i])
                return i
        }
    }
</script>

现在我是通过for循环来找到对应的节点，从而获取位置，感觉这样有点怪，请问有其他思路吗

Answer 1

可以给li加一个类似data-index = i的属性 点击的时候获取data-index就好了

Answer 2

array.indexOf(target)或者string.indexOf(target)，
原本是用来搜索数组中给定元素的第一个索引，或者指定字符串在一个字符串对象中第一次出现的的索引

这里可以借用原生js里的indexOf()方法，并用call将其this指向要查询的元素集合。

<ul id='parent'>
    <li class="child1">1</li>
    <li class="child2">2</li>
    <li class="child3">3</li>
</ul>

var children = document.querySelectorAll('#parent >li');
var target = document.querySelector('.child3');
var index = [].indexOf.call(children , target );
console.log(index); //2

Answer 3

将click事件绑在li元素上，事件触发的函数内可以方便的返回序号。

var lis = document.querySelectorAll('#ul>li');
lis.forEach((el,index) => {
     el.onclick = (e)=> console.log('当前元素索引是' + index);

});