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


150

例如,当我想获取元素的三级父级时,$('#element').parent().parent().parent()是否需要为此编写更好的方法?


2
我只想给出数字(级别)并获取元素,因为我的元素可能没有任何名称或名称
Artur Keyan

1
如果您打算重用此功能,则最佳解决方案是制作一个jQuery插件。
zzzzBov 2011年


1
另一个好的工具是“ .closest()”函数。$('li.item')。closest('div')将给您DIV,它是li.item的最接近祖先。当您不知道该元素有多少级时非常有用,但是您确实知道它的标记名/类/其他东西。
格雷厄姆

Answers:


266

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

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

我可以使用这个$('#element')。parents()[2]吗?或必须使用eq(2)
Artur Keyan

1
这不适用于多个元素选择,更安全的方法是:$('.element').first().parents().eq(num);
zzzzBov 2011年

6
@Arthur,使用[2]将返回基础DOM元素,使用eq(2)将返回jQuery对象。
弗雷德里克·哈米迪

1
@zzzzBov,非常正确,但是在提问者的案例中只会选择一个元素(因为他匹配一个id)。
弗雷德里克·哈米迪

如果您在id“ #element”上进行查找,则只会返回一个元素,因为ID查找是这样工作的,他们会在dom中返回具有该ID的第一个元素。另一方面,如果您执行了“ div#element”或类选择器,那么您将是对的。
亨利

29

根据您的需要,如果您知道要寻找的父母,可以使用.parents()选择器。

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

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

我现在就这样,但我想
讲一讲

3
进一步阅读答案,一切都将揭晓!(我已经给您提供了级别示例)
亨利

这对于所有其他类型的选择器都很好。例如,如果要列出所有父母和具有特定班级的父母的父母的列表,则将其返回。
darksky '17

8

你可以给目标父母一个ID或类(例如myParent),引用是 $('#element').parents(".myParent")


我想给只有数量和获得元素,因为我的元素可能没有任何CALSS ID或名字
阿图尔·柯岩

6

一种更快的方法是直接使用javascript,例如。

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

与链接jQuery .parent()调用相比,此方法在我的浏览器上的运行速度明显更快。

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


通过“明显更快”,我们可以看到速度差大约一个数量级(在Chrome 51上运行jQuery 1.10.1)。如果您要调整速度,绝对值得实施。
伊恩·弗雷泽

5

找不到使用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'

3

这很简单。只需使用

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

其中0是父级(0是父级,1是父级的父级,依此类推)



3

如果您打算重用此功能,则最佳解决方案是制作一个jQuery插件:

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

当然,您可能需要扩展它以允许使用可选的选择器和其他类似的东西。

请注意:这0为父母使用了基础索引,因此nthParent(0)与call相同parent()。如果您希望1基于索引,请使用n-- > 0


我认为您会更快地找到这部分内容var p = 1 + n; while (p--) { $p = $p.parent(); };如果您想更改为基于1的内容,并且Javascript为“ falsey”,则可以使用:while (n--) { $p = $p.parent();} 保存条件检查
Mark Schultheiss,

@Mark Schultheiss,这不仅关乎速度,也关乎可靠性。如果有人无知地呼叫,您的功能会nthParent(-2)怎样?您的示例已损坏。
zzzzBov

或刚回来(function($) { $.fn.nthParent = function(n) { return $(this).parents().eq(n); }; }(jQuery));
Mark Schultheiss

@Mark Schultheiss,再次,可靠性。我的函数为选择中的每个元素返回nthParent ,您的函数返回列表中的第n个元素,parents对于具有多个元素的选择来说将是不正确的。
zzzzBov

关于-2为true,并且在您的示例中使用,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)); 如果您不想返回任何东西。
Mark Schultheiss

3

如果您有共同的父母div,则可以使用parentUntil()链接

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

优点是您无需记住此元素和公共父级(由commonclass定义)之间有多少代。


1

您还可以使用:

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

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



0

使用eq似乎可以获取动态DOM,而使用.parent()。parent()似乎可以获取最初加载的DOM(如果可能的话)。

我在具有将其应用于onmouseover的类的元素上都使用它们。eq显示类,而.parent()。parent()不显示。


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.