如何使用jquery查找元素的第n个父元素

Posted 2023-04-13

【中文标题】如何使用jquery查找元素的第n个父元素

【英文标题】：How to find nth parent of an element using jquery

【发布时间】：2012-01-01 02:14:00

【问题描述】：

我想找到给定元素的第 n 个父元素并访问父元素的属性。

<div id='parent1'><br/>
  <div id='parent2'><br/>
       <span><p id='element1'>Test</p></span><br/>
  </div><br/>
  <div id='parent3'><br/>
       <span><p id='element2'>Test</p></span><br/>
  </div><br/>
</div>

我想在不使用

的情况下访问 element1 的第三个父元素

$('#element1').parent().parent().parent()

任何帮助将不胜感激

【问题讨论】：

How do I get the n-th level parent of an element in jQuery?的可能重复

【参考方案1】：

您可以使用.parents() 和.eq()：

$('#element1').parents().eq(2);

http://jsfiddle.net/infernalbadger/4YmYt/

【参考方案2】：

parents() 返回一个列表，所以这是可行的：

$('#element1').parents()[2];

【参考方案3】：

使用：

$('#element1').closest('#parent1');

【讨论】：

如果您知道 ID，那么使用closest 没有任何意义

谢谢。这段代码对于当前的例子来说已经足够好了。但我想像第三父或第四父一样动态搜索它

@Richard Dalton，$('#element1').closest('#parent1').hasClass('whatever');

【参考方案4】：

你可以做一个小插件来解决这个问题：

$.fn.nthParent = function(n)
    var p = this;
    for(var i=0;i<n;i++)
        p = p.parent();
    return p;

然后将其用作：

$('#element1').nthParent(3);