如何在 jQuery 中获得元素的 n 级父元素？

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

124161 次浏览
小开

您可以为目标父类提供一个 id 或类(例如 myParent) ，引用使用 $('#element').parents(".myParent")

小开

根据您的需要，如果您知道要找什么样的父类，那么可以使用. father ()选择器。

例如: 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
// I.e Selects div#One
var topTwo = $("#Four").parents().eq(2);


alert($(topTwo ).html());
小开

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

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

这在我的浏览器上比链接 jQuery.parent()调用运行速度快得多。

见: http://jsperf.com/jquery-get-3rd-level-parent

小开
最佳答案

由于 家长()返回从最接近外部元素排序的祖先元素，因此可以将它链接到 等式():

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

很简单，用就是了

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

其中0是父级(0是父级，1是父级的父级等)

小开

你可以用这样的东西:

(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/

小开

像这样添加 :eq()选择器:

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

您只需指定索引哪个父: 0表示直接父，1表示祖父，..。

小开

如果您打算重用这个功能，最佳的解决方案是创建一个 jQuery 插件:

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

当然，您可能希望对其进行扩展，以允许使用可选的选择器和其他类似的东西。

注意: 这对父级使用基于 0的索引，因此 nthParent(0)与调用 parent()相同。如果您希望使用基于 1的索引，请使用 n-- > 0

小开

你亦可使用:

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

例如: $(this).ancestors().eq(2)-> this的父母的父母。

小开

使用 eq 似乎可以获取动态 DOM，而使用。家长()。Rent ()似乎会获取最初加载的 DOM (如果可能的话)。

我在 onmouseover 上将它们用在一个元素上，该元素上有应用它的类。Eq 显示类。家长()。父母()没有。

小开

如果您有一个通用的父 div，那么可以使用 ParentsTill () 链接

例句: $('#element').parentsUntil('.commonClass')

优点是您不需要记住这个元素和通用父元素(由 commonclass 定义)之间有多少代。

小开

当 家长()返回一个列表时，这也是有效的

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

没有找到任何答案使用 < a href = “ https://api.jquery.com/close/”rel = “ norefrer”> closest() 我认为这是最简单的答案，当你不知道需要的元素有多少级时，所以发布一个答案:
您可以使用 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'

提交答案