jQueryで要素のn番目のレベルの親を取得するにはどうすればよいですか？

たとえば、作成する必要がある要素の3番目のレベルの親を取得したい場合$('#element').parent().parent().parent()、これに最適な方法はありますか？

以来両親は（）外のものに近いから注文祖先要素を返し、あなたはにそれをチェーンすることができます）（EQ：

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

探している親がわかっている場合は、ニーズに応じて.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());

ターゲットの親にIDまたはクラス（例：myParent）を与えることができ、参照は $('#element').parents(".myParent")

より速い方法は、javascriptを直接使用することです。

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

これは、jQuery .parent()呼び出しをチェーンするよりも私のブラウザーで非常に速く実行されます。

参照：http : //jsperf.com/jquery-get-3rd-level-parent

を使用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'

それは簡単です。使うだけ

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

ここで、0は親レベルです（0は親、1は親の親など）

次の:eq()ようにセレクタを追加するだけです：

$("#element").parents(":eq(2)")

親を指定するインデックスを指定するだけです：0は直接の親、1は祖父母、...

この機能の再利用を計画している場合、最適なソリューションはjQueryプラグインを作成することです。

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

もちろん、オプションのセレクターなどを許可するように拡張することもできます。

注：これは、0親のベースインデックスを使用するためnthParent(0)、を呼び出すのと同じparent()です。1ベースのインデックスを作成したい場合は、n-- > 0

共通の親divがある場合は、parentsUntil（）リンクを使用できます

例えば： $('#element').parentsUntil('.commonClass')

利点は、この要素と共通の親（commonclassで定義）の間に何世代あるかを覚えておく必要がないことです。

あなたも使うことができます：

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

例：$(this).ancestors().eq(2)->の親の親this。

あなたはこのようなものを使うことができます：

(function($) {
    $.fn.parentNth = function(n) {
        var el = $(this);
        for(var i = 0; i < n; i++)
            el = el.parent();

        return el;
    };
})(jQuery);

alert($("#foo").parentNth(2).attr("id"));

http://jsfiddle.net/Xeon06/AsNUu/

eqを使用すると動的DOMを取得するように見えますが、.parent（）。parent（）を使用すると最初にロードされたDOMを取得するように見えます（それが可能な場合でも）。

私はonmouseoverに適用されたクラスを持つ要素で両方を使用します。eqはクラスを表示しますが、.parent（）。parent（）は表示しません。

通りの両親は（）のリストを返し、これも動作します

$('#element').parents()[3];