DOM中孩子的深度

Question

我可以通过任何方式知道基于容器的孩子的深度.例:

<div id="dontainer">
   <ul>
      <li>1</li>
      <li>2</li>
      <li id="xelement">3</li>
      <li>4</li>
      <li>5</li>
   </ul>
</div>

"xelement"应该得到2(从0开始).知道"li"处于同一水平.

谢谢

Answer 1

$.fn.depth = function() {
  return $(this).parents().length;
};

或类似的东西.

Answer 2

假设您想要参考某个任意祖先来查找孩子的深度.

function depth(parent, descendant) {
  var depth = 0;
  var el = $(descendant);
  var p = $(parent)[0];
  while (el[0] != p) {
    depth++;
    el = el.parent();
  }
  return depth;
}

// Example call:
depth(".mainContent", "li")

完整的解决方案需要处理指定的父级不是后代的祖先的情况.

或者,仅当您支持ES5及更高版本时,直接使用DOM节点可以消除对jQuery的依赖:

function depth(parent, descendant) {
    var depth = 0;
    while (!descendant.isEqualNode(parent)) {
      depth++;
      descendant = descendant.parentElement;
    }
    return depth;
}

// Example call:
depth(document.querySelector('.mainContent'), document.querySelector('li'))