例如，当我想获取元素的第 3 级父级时，我必须写 $('#element').parent().parent().parent() 是否有更优化的方法？
【问题讨论】：
标签： javascript jquery parent
【讨论】：
$('.element').first().parents().eq(num);
[2] 将返回底层DOM 元素，使用eq(2) 将返回一个jQuery 对象。
取决于您的需要，如果您知道要寻找的父母，您可以使用 .parents() 选择器。
例如： 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());
【讨论】：
您可以为目标父级提供一个 id 或类（例如 myParent），并且引用是 $('#element').parents(".myParent")
【讨论】：
一种更快的方法是直接使用javascript，例如。
var parent = $(innerdiv.get(0).parentNode.parentNode.parentNode);
这在我的浏览器上运行速度明显快于链接 jQuery .parent() 调用。
【讨论】：
使用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'
【讨论】：
这很简单。只需使用
$(selector).parents().eq(0);
其中 0 是父级别（0 是父级，1 是父级的父级等）
【讨论】：
只需像这样添加: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
【讨论】：
var p = 1 + n; while (p--) { $p = $p.parent(); } 如果您想更改为基于 1 的 JavaScript，您可以使用“错误”的 JavaScript：while (n--) { $p = $p.parent();} 保存条件检查
nthParent(-2)，你的函数会发生什么？你的例子坏了。
(function($) { $.fn.nthParent = function(n) { return $(this).parents().eq(n); }; }(jQuery));
parents 列表中的第n 个元素，这将是不正确的用于具有多个元素的选择。
var p = n >? (1 + n):1; 会在这种情况下返回第一个父级而不是“无” - 或者它在我的示例中打破循环。所以，如果你不想返回任何东西，它可能应该是：(function($) { $.fn.nthParent = function(n) { var $p = $(this); if (!(n > -0)) { return $() }; var p = 1 + n; while (p--) { $p = $p.parent(); } return $p; }; }(jQuery)); 。
如果你有一个共同的父 div，你可以使用 parentsUntil() link
例如：$('#element').parentsUntil('.commonClass')
优点是你不需要记住这个元素和公共父级（由 commonclass 定义）之间有多少代。
【讨论】：
你也可以使用：
$(this).ancestors().eq(n)
例如：$(this).ancestors().eq(2) -> this 的父级的父级。
【讨论】：
parents() 返回一个列表，这也有效
$('#element').parents()[3];
【讨论】：
你可以这样使用：
(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"));
【讨论】：
使用 eq 似乎是抓取动态 DOM，而使用 .parent().parent() 似乎是抓取最初加载的 DOM（如果可能的话）。
我在一个元素上同时使用它们，该元素在 onmouseover 上应用了它的类。 eq 显示类，而 .parent().parent() 不显示。
【讨论】：