javascript - 遍历对象的子对象，直到找到具有属性 X 的锚点

Question

假设我有一个 DOM 元素。

我将如何在Javascript中执行此操作，以查明该元素是否有任何子元素（或子元素的子元素），该<a>元素是 href 属性的元素'/'的元素？如果是这样，返回到哪个级别（深）？

到目前为止，我有这个：

var children = element.children
var level = 1;
    for (var i=0; i < children.length; i++) {
      if (children[i].nodeName == 'A' && children[i].href == '/') {
        return true;
      }
    }

我怎么去孩子们的孩子们那里？

Answer 1

怎么样：

function getLevelOfAnchorWithAttrX (element, attr) {
    var anchor = element.querySelector('a[href="' + attr + '"]');
    if (anchor) {
        var level = 1;
        var levelElement = anchor
        while (levelElement.parentElement !== element) {
            level++;
            levelElement = levelElement.parentElement;
        }
        return level;
    }
}

看这里。

Answer 2

使用递归函数：

function traverseChildren(el, depth) {
  depth = depth || -1;
  for (var i=0; i < el.children.length; i++) {
    if (children[i].nodeName == 'A' && children[i].href == '/') {
      return ++depth;
    }
    else if (el.children.length > 0) {
      depth = traverseChildren(el, ++depth);
    }
  }
  return depth;
}

var depth = traverseChildren(element, depth);
if (depth != -1) {
  console.log('a element found at ' + depth + ' levels deep');
}
else {
  console.log('no a element found');
}