web-dev-qa-db-ja.com

jQuery：祖父母の選択

これを避けるためにjQueryで祖父母要素を選択するより良い方法はありますか？

$(this).parent().parent().parent().parent().parent().children(".title, .meta").fadeIn("fast");

ありがとう。

jqueryjquery-selectors
48
aneuryzm

セレクタに対して親を一致させるparents()メソッドを使用できます

http://api.jquery.com/parents/

または、1.4を使用している場合は、新しいparentsUntil()メソッドがあります

http://api.jquery.com/parentsUntil/

53
Neil Aitken

parents()に加えて、彼らが言ったように、 check closest() もする必要があります。そこのドキュメントの比較を読んでくださいが、主な違いは、検索結果が1つだけであり、検索対象に$(this)が含まれていることです（そうでない場合は、検索しているものを取得できます）特定の十分な）。長所と短所。

24
D_N

どこかでエラーが出ている明確なクラス選択があると思ったので、この簡単なプラグインを書きました。この特定のケースでは、祖父母の選択は$().parents()よりも直接的に思えました。

まあ、私は一度これを使って、実際にスペルミスがあることに気付きました。それが本当にどれほど役立つかはわかりません。 $('myelem').gparent(2);は、「myelem」の祖父母を取得します。

(function( $ ){
$.fn.gparent = function( recursion ){
    if( recursion == undefined ) recursion = 2;
    if(typeof(recursion) == "number"){
        recursion = parseInt( recursion );
        if( recursion > 0 ){
            gparent_holder = $(this);
            for(var gparent_i = 0; gparent_i < recursion; gparent_i++){
                gparent_holder = gparent_holder.parent();
            }
            return gparent_holder;
        }
        else return false;
    }
    else return false;
}
})( jQuery );
5
Femi

parents()セレクターを使用して、要素のすべての親を取得します。その後、コレクションを検索するか、すべての祖先に影響を与える場合はコレクションを反復処理できます。

2
Traveling Tech Guy

@Femiにはこれを行うための答えがあり、再帰について言及しましたが、彼の解決策は再帰的ではありませんでした。アイテムの祖先を取得するための再帰的jQueryソリューションは次のとおりです。

$.fn.gparent = function( recursion ){
   console.log( 'recursion: ' + recursion );
   if( recursion > 1 ) return $(this).parent().gparent( recursion - 1 );
   return $(this).parent();
};

これがHTMLの場合：

<div id='grandparent'>
  <div id='parent'>
    <div id='child'>
      child
    </div>
  </div>
</div>

電話することができます

console.log( $('#child').gparent( 2 ) );

要素childの祖父母を取得します。 これはJSFiddleです

2
patrick

parents()とchildren()を使用しても同じ結果が得られます。

これを使用する代わりの例：

$(this).parent().parent().parent().children(".title").fadeIn("fast");

これを使用できます：

$(this).parents().children(".title").fadeIn("fast");
0
NJENGAH