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

Question

我想找到给定元素的第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()

希望得到任何帮助。

- Rakhitha Nimesh

---

可能是重复的问题，参考如何在jQuery中获取元素的第n级父元素？。 - Frédéric Hamidi

Answer 1

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

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

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

- Richard Dalton

Answer 2

parents()返回一个列表，所以这样可以实现：

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

- DidThis

Answer 3

使用：

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

- Alex

---

如果您已经知道了ID，则使用closest就没有任何意义。 - Richard Dalton

谢谢。这段代码对于当前的示例已经足够好了。但是我想要像第三个父级或第四个父级那样动态搜索它。 - Rakhitha Nimesh

@Richard Dalton，$('#element1').closest('#parent1').hasClass('whatever')怎么样？ - tmatyo

Answer 4

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

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

然后将其用作：

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

- gion_13