查找 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

這為您提供了您正在尋找的孩子和根之間的父母數量。 如果您正在尋找到達父級所需的層次結構的跳轉次數，則只需添加 1。

如果您需要在 vanilla JS 中執行此操作，您可以在 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的后代，它將拋出錯誤。