Question

我想知道，如何递归地找出元素的所有父节点。假设我有以下代码段

<a href="#">Hello</a>

在此我想知道font标签的父节点是否是锚标签。现在可以通过简单地检查.parentNode属性来实现。但是，如果有以下情况，例如，

<a href="#">Hello</a>

或

<a href="#">Hello</a>

那么，基本上，如何知道我们是否已经到达最顶层的父节点？

Answer 1

您可以从元素遍历到根，寻找所需的标记：

function findUpTag(el, tag) {
    while (el.parentNode) {
        el = el.parentNode;
        if (el.tagName === tag)
            return el;
    }
    return null;
}

您可以使用start元素调用此方法：

var el = document.getElementById("...");  // start element
var a = findUpTag(el, "A");   // search <a ...>
if (a) console.log(a.id);

Answer 2

以下递归函数将返回升序有序数组，其中包含所提供DOM元素的所有父节点，直到达到BODY节点。

function parents(element, _array) {
    if(_array === undefined) _array = []; // initial call
    else _array.push(element); // add current element
    // do recursion until BODY is reached
    if(element.tagName !== 'BODY' ) return parents(element.parentNode, _array);
    else return _array;
}

用法：

var parentsArray = parents( document.getElementById("myDiv") );

Answer 3

您可以使用jQuery nearest（）方法获取最接近的ahref：

$("#your-element").closest("a").css("color", "red");

或者您可以查看parentsUntil方法：

$("#your-element").parentsUntil("#yourWrapper", "a").first().css("color", "red");

在此处试试：http://www.lunarailways.com/demos/parents.html

Answer 4

我一直在做类似的事情。如果用户在div外部点击，则尝试关闭div。它需要循环遍历其所有父节点。

看看这个： http://jsfiddle.net/aamir/y7mEY/

Answer 5

这是一个较短的：

function parentByTag(el, tag) {
    if(!el || el.tagName == tag) {
        return el
    } else {
        return parentByTag(el.parentElement, tag)
    }
}

如果找不到则返回undefined。

如何递归搜索所有parentNodes

5 个答案: