web-dev-qa-db-ja.com

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

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

javascriptjqueryparent
140
Artur Keyan

parents（） は、最も外側の要素から順番に先祖要素を返すので、 eq（） にチェーンできます。

$('#element').parents().eq(0);  // "Father".
$('#element').parents().eq(2);  // "Great-grandfather".
247
Frédéric Hamidi

必要に応じて、探している親がわかっている場合は、.parents（）セレクターを使用できます。

E.G： 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());
26
Henry

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

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

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

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

6
a'r

ターゲットの親にidまたはクラス（myParentなど）を与えることができ、参照は$('#element').parents(".myParent")で行われます

6
Joseph Marikle

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

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

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

3
ashishyadaveee11

この機能の再利用を計画している場合、最適なソリューションは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を使用します

3
zzzzBov

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'
2
Dane

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

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

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

2
zatatatata

以下も使用できます。

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

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

1
Mouna Cheikhna

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

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

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

1
MBO

次のようなものを使用できます。

(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/

0
Alex Turpin

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

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

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

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

0
user875234