Question

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

Answer 1

由于parents()会返回从最接近外部元素排序的祖先元素，因此您可以将其链接到eq()：

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

Answer 2

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

E.G： 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());

Answer 3

您可以为目标父级提供ID或类（例如myParent），并引用$('#element').parents(".myParent")

Answer 4

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

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

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

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

Answer 5

如果您打算重用此功能，最佳解决方案是制作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

Answer 6

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

例如：$('#element').parentsUntil('.commonClass')

优点是你不需要记住这个元素和普通父元素之间有多少代（由commonclass定义）。

Answer 7

这很简单。只需使用

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

其中0是父级别（0是父级，1是父级父级等）

Answer 8

使用closest()找不到任何答案当你不知道所需元素的等级是多少时，我认为这是最简单的答案，所以发布答案：
你可以使用closest()函数和selectors来获得从元素向上遍历时匹配的第一个元素：

('#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'

Answer 9

只需添加:eq()选择器，如下所示：

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

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

Answer 10

你也可以使用：

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

例如：$(this).ancestors().eq(2) - ＆gt; this的父级的父级。

Answer 11

您可以使用以下内容：

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

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

我在onmouseover上将类应用于它的元素上使用它们。 eq显示类，而.parent（）。parent（）不是。

Answer 13

当parents()返回一个列表时，这也有效

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

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

13 个答案: