原生JS如何获取当前元素属于父元素第几个子元素
原创
包含文本和注释节点
原生JS有一个常见的小技巧那就是通过元素的previousSibling 属性，额外需要注意的是该属性会遍历text节点，即回车键。
从零开始我们可以这样的代码获取到一个元素属于父元素的第几个子元素。
var child = this;
while( (child = child.previousSibling) != null )
i++;案例代码如下：
Html:
<ul id="ul"><li>123</li><li id="a">a</li><li>b</li><li>c</li></ul>JS:
var child = document.getElementById("a");
var i = 0;
while((child = child.previousSibling) != null) i++;
console.log(i) //console 1通过循环遍历previousSibling 属性是否为null这个小技巧，就可以获取到当前元素在父元素中的位置了。
不包含文本节点和注释节点
实现代码如下：
var child = document.getElementById("a");
var parent = child.parentNode;
var index = Array.prototype.indexOf.call(parent,child);
console.log(index)//1原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录