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の3番目の親要素にアクセスしたい

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

助けていただければ幸いです

Answer 1

.parents()および.eq()を使用できます。

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

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

Answer 2

それを処理する小さなプラグインを作成できます。

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

そしてそれを次のように使用します：

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

Answer 3

parents（） はリストを返すため、これは機能します。

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

Answer 4

使用する：

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