原生JS怎样猎取当前元素属于父元素第几个子元素

2024年5月14日 493次阅读 来源: 创客青年博客

我们常常经由过程document.getElementById 方法来获取到一个元素，这个时刻我们常常须要有一个需求，那就是怎样推断这个元素在父元素中的位置。

包括文本和解释节点
原生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

原文链接：https://www.pipipi.net/code/9…

    原文作者：创客青年博客
    原文地址: https://segmentfault.com/a/1190000018475186
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞