如何递归搜索所有父节点答案

【问题标题】：How to recursively search all parentNodes如何递归搜索所有父节点
【发布时间】：2011-11-12 00:42:01
【问题描述】：

我想知道，如何递归地找出一个元素的所有父节点。假设我有以下 sn-p

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

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

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

或

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

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

【问题讨论】：

字体标签的直接父节点是锚标签..在所有场景中，请修改您的问题
developer.mozilla.org/en-US/docs/Web/API/Element/closest

标签： javascript html dom

【解决方案1】：

这是一个较短的：

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

如果没有找到则返回undefined。

【讨论】：

【解决方案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") );

【讨论】：

递归 = 缓慢、糟糕的性能。几乎没有例外

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

你可以从一个元素一直遍历到根来寻找想要的标签：

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

你用你的开始元素调用这个方法：

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

【讨论】：

宾果游戏。递归，递归，递归。
这里没有递归！只是一个迭代循环。
似乎无法让它与 event.target 一起使用？我所做的只是在调用 findUpTag:findUpTag(event.target, 'B' 时添加 event.target，只返回空白。有什么想法吗？
不错！我开始编写一些递归，但 while 循环可能更快。
响应：您可以在此处使用 HTML 元素文档中的 closest() 函数：developer.mozilla.org/en-US/docs/Web/API/Element/closest

【解决方案5】：

你可以使用jQuery的closest()方法来获取最近的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

【讨论】：

普通的 JS 解决方案会比 jQuery、IMO 提供更多信息。