javascript - 查找 DOM 中元素之间的距离

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

这为您提供了您正在寻找的 child 和根之间的 parent 数量。如果您正在寻找到达父级所需的层次结构的跳转次数，您可以只加 1。

如果您需要在 vanilla JS 中执行此操作，您可以查看 source code在 GitHub 上获取此功能。