Question

在DOM树中有一个根元素，并且该根元素内还有一个嵌套在某处的元素。如何计算此另一个元素在根元素内的嵌套程度？

从本质上讲，我想知道必须获得多少次嵌套元素的父元素才能到达根元素。因此，可以像在fiddle中那样，通过迭代父级直到到达根元素来解决此问题。

const first = document.getElementById('search-target-1');

let parent = first.parentElement;
let level = 0;
do {
  parent = parent.parentElement;
  level++;
}
while (!parent.classList.contains('root'))

console.log(`The first element is ${level} levels deep inside the root div.`);

const second = document.getElementById('search-target-2');

parent = second.parentElement;
level = 0;
do {
  parent = parent.parentElement;
  level++;
}
while (!parent.classList.contains('root'));

console.log(`The second element is ${level} level deep inside the root div.`);

<div class="root">
  <div class="first-level">
    <div class="second-level" id="search-target-1">
      <!-- How deep is this element? -->
    </div>
  </div>
  <div class="first-level"></div>
  <div class="first-level">
    <div class="second-level">
      <div class="third-level" id="search-target-2">
        <!-- And this one? -->
      </div>
    </div>
  </div>
</div>

是否有更好的方法来实现这一目标？我正在寻找一个JavaScript API来获得相同的结果。

element.matchesSelector不能解决我的问题，因为我知道目标元素位于根元素内，但是我不知道它有多深。

Answer 1

您可以使用jQuery的.parentsUntil()函数来完成此操作：

var searchDistance_1 = $("#search-target-1").parentsUntil(".root").length; // 1
var searchDistance_2 = $("#search-target-2").parentsUntil(".root").length; // 2

这使您可以找到所需的孩子和孩子之间的父母数量。如果您要查找到达父级所需的层次结构跳转次数，则只需添加1。

如果您需要在香草JS中执行此操作，则可以在source code中查看GitHub上的此功能。

Answer 2

您的代码有效，但是正如黑暗绝对之王尼特（Niet the Dark Absol）所说，您需要注意后代不是后代的情况，例如

function getLevel(parent, child) {
  let level = 0;
  while (child && parent != child) {
    level++;
    child = child.parentNode;
  }
  return child? level : null;
}

var parent = document.getElementById('parent');
var child = document.getElementById('child');
var notChild = document.getElementById('notChild');

console.log(getLevel(parent, child));     // 3
console.log(getLevel(parent, notChild));  // null

<div id="parent">
  <div>
    <div>
      <div id="child"></div>
    </div>
  </div>
</div>
<div id="notChild"></div>

如果循环用完parnetNodes时没有停止保护的条件，则如果 child 不是 parent 的后代，则会抛出错误。

查找DOM中元素之间的距离

2 个答案: