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'))

Answer 3

一个简单的递归函数，类似于：（虽然我建议使用工具包，这是一个很好的小学习游戏，错误修复左边作为读者的练习。）



function countDepth(node, stopPredicate, count) {
  count = count || 0
  stopPredicate = stopPredicate || function () {}
  if (stopPredicate(node) || !node.parentNode) {
    return count
  }
  return countDepth(node.parentNode, stopPredicate, count + 1)
}

var depth = countDepth(document.getElementById("xelement"), function (node) {
  return "dontainer" == node.id
})

// or, with no predicate -- will count *full* depth
// depth = countDepth(document.getElementById("xelement"))

alert(depth)

编辑：如果您使用的是jQuery，请参阅nearest（）函数。

DOM中孩子的深度

3 个答案: