javascript - 获取元素的 DOM 层次结构级别(计算后代级别)

Question

是否有一种有效的方法来计算特定元素的最深后代级别？

例子:

<div id="wrapper">
  <ul>
    <li class="first">first</li>
    <li class="active">second</li>
    <li class="last"><a>third</a></li>
  </ul>
</div>

#wrapper 应该返回 4 的后代级别，因为最深的链是这样的:#wrapper > ul > li > a。

li.first 应该返回 1 因为它没有 child ，li.last 应该返回 2 因为li.last > a。

我可以做一个 $('#wrapper').find(*) 并遍历所有结果，这对于有很多后代的元素来说应该很慢，特别是对于 body 元素。

这是实验的开始:http://jsbin.com/ixeWaja/1/edit

有什么有效解决这个问题的想法吗？

Answer 1

如果您最终需要深度，效率可能不是您最关心的问题，但这是一种非常简洁有效的方法。

var el = $("#wrapper");
var i = 0;

while ((el = el.children()).length) {
    i++;
}

http://jsbin.com/ixeWaja/4/