子级在DOM中的深度

假设你想找到某个任意祖先的子代的深度。

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

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

或者类似的。

一个简单的递归函数,类似于: (虽然我确实推荐使用工具包,但这是一个很好的小学习游戏,修复漏洞留给读者作为练习。)

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)