Javascript 如何递归搜索所有父节点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7332179/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to recursively search all parentNodes
提问by Shades88
I want to know, how to find out recursively all parent nodes of an element. Suppose i have following snippet
我想知道，如何递归地找出一个元素的所有父节点。假设我有以下片段
<a href="#"><font>Hello</font></a>
<a href="#"><font>Hello</font></a>
In this I would like to find out whether font tag's parent node is an anchor tag or not. Now this can be achieved by simply checking .parentNode property. But what if there are following cases like,
在此我想找出字体标签的父节点是否是锚标签。现在这可以通过简单地检查 .parentNode 属性来实现。但是如果有以下情况怎么办，
<a href="#"><font><b>Hello<b></font></a>
<a href="#"><font><b>Hello<b></font></a>
or
或者
<a href="#"><font><b><u>Hello</u><b></font></a>
<a href="#"><font><b><u>Hello</u><b></font></a>
So, basically, how to know if we have reached the top most parent node ?
那么，基本上，如何知道我们是否已经到达最顶端的父节点？
回答by Jiri Kriz
You can traverse from an element up to the root looking for the desired tag:
您可以从元素遍历到根以查找所需的标签：
function findUpTag(el, tag) {
while (el.parentNode) {
el = el.parentNode;
if (el.tagName === tag)
return el;
}
return null;
}
You call this method with your start element:
您可以使用 start 元素调用此方法：
var el = document.getElementById("..."); // start element
var a = findUpTag(el, "A"); // search <a ...>
if (a) console.log(a.id);
回答by colxi
The following recursive function will return an ascending ordered array, with all the parents nodes for the provided DOM element, until BODY node is reached.
以下递归函数将返回一个升序数组，其中包含所提供 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;
}
Usage :
用法 ：
var parentsArray = parents( document.getElementById("myDiv") );
回答by Fons
Here's a shorter one:
这是一个较短的：
function parentByTag(el, tag) {
if(!el || el.tagName == tag) {
return el
} else {
return parentByTag(el.parentElement, tag)
}
}
Returns undefinedif not found.
undefined如果未找到则返回。
回答by Fons
You can use jQuery closest() method to get the closest ahref:
您可以使用 jQuery Nearest() 方法来获得最接近的 ahref：
$("#your-element").closest("a").css("color", "red");
Or you can have a look at the parentsUntilmethod:
或者你可以看看parentsUntil方法：
$("#your-element").parentsUntil("#yourWrapper", "a").first().css("color", "red");
Try it out here: http://www.lunarailways.com/demos/parents.html
回答by Aamir Afridi
I been working on similar thing. Trying to close a div if user clicks outside the div. It needs to loop through all its parent nodes.
我一直在做类似的事情。如果用户在 div 外单击，则尝试关闭 div。它需要遍历其所有父节点。
have a look at this: http://jsfiddle.net/aamir/y7mEY/
