我如何获得jQuery中元素的第n级父对象？

当我想得到，例如，元素的第三级父母我必须写$('#element').parent().parent().parent()有没有更好的方法呢？

Answer 1

由于父母（）返回从最接近外部的祖先元素，你可以链接到eq（） ：

 $('#element').parents().eq(0); // "Father". $('#element').parents().eq(2); // "Great-grandfather". 

Answer 2

取决于你的需求，如果你知道你的父母寻找你可以使用.parents（）select器。

EG： http : //jsfiddle.net/HenryGarle/Kyp5g/2/

 <div id="One"> <div id="Two"> <div id="Three"> <div id="Four"> </div> </div> </div> </div> var top = $("#Four").parents("#One"); alert($(top).html()); 

使用索引的示例：

 //First parent - 2 levels up from #Four // Ie Selects div#One var topTwo = $("#Four").parents().eq(2); alert($(topTwo ).html()); 

Answer 3

更快的方法是直接使用JavaScript，例如。

 var parent = $(innerdiv.get(0).parentNode.parentNode.parentNode); 

在浏览器上运行速度明显快于链接jQuery .parent()调用。

请参阅： http : //jsperf.com/jquery-get-3rd-level-parent

Answer 4

你可以给目标父母一个id或class（例如myParent），引用是$('#element').parents(".myParent")

Answer 5

这很简单。 只是使用

 $(selector).parents().eq(0); 

其中0是父级（0是父母，1是父母的父母等）

Answer 6

如果你打算重用这个function，最好的解决scheme是制作一个jQuery插件：

 (function($){ $.fn.nthParent = function(n){ var $p = $(this); while ( n-- >= 0 ) { $p = $p.parent(); } return $p; }; }(jQuery)); 

当然，你可能想要扩展它以允许一个可选的select器和其他类似的东西。

一个注意：这对于父母使用基于0的索引，所以nthParent(0)和调用parent()是一样的。 如果您希望有1索引，请使用n-- > 0

Answer 7

只需添加:eq()select器：

 $("#element").parents(":eq(2)") 

你只要指定索引哪一个父母：0为直接父母，1为父母，…

Answer 8

你也可以使用：

 $(this).ancestors().eq(n) 

例如： $(this).ancestors().eq(2) – >这是父项的父项。

Answer 9

你可以使用这样的东西：

 (function($) { $.fn.parentNth = function(n) { var el = $(this); for(var i = 0; i < n; i++) el = el.parent(); return el; }; })(jQuery); alert($("#foo").parentNth(2).attr("id")); 

http://jsfiddle.net/Xeon06/AsNUu/

Answer 10

使用eq似乎抓住dynamicDOM，而使用.parent（）。parent（）似乎抓住最初加载的DOM（如果甚至可能的话）。

我将它们同时应用于onmouseover上的类。 eq显示类，而.parent（）。父（）没有。

Answer 11

如果你有一个共同的父div，你可以使用parentsUntil（） 链接

例如：$（'＃element'）。parentsUntil（'。commonClass'）

好处是，你不需要记住这个元素和公共类（由commonclass定义）之间有多less代。

Answer 12

作为父母（）返回一个列表，这也适用

 $('#element').parents()[3]; 

Answer 13

没有find任何答案使用closest() ，我认为这是最简单的答案，当你不知道有多less层次的所需元素，所以张贴答案：
您可以使用与select器结合的closest()函数来获取从元素向上遍历时匹配的第一个元素：

 ('#element').closest('div') // returns the innermost 'div' in its parents ('#element').closest('.container') // returns innermost element with 'container' class among parents ('#element').closest('#foo') // returns the closest parent with id 'foo'