如何使用 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()

任何帮助将不胜感激

Answer 1

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

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

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

Answer 2

使用：

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

Answer 3

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

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

Answer 4

你可以制作一个小插件来处理这个问题：

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

然后将其用作：

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