web-dev-qa-db-ja.com

jQuery：親の特定の子に到達する方法は？

簡単な例を挙げると、ページ上で次のブロックが何度も繰り返されています（動的に生成されます）。

<div class="box">
   <div class="something1"></div>
   <div class="something2">
      <a class="mylink">My link</a>
   </div>
</div>

クリックすると、リンクの親にアクセスできます：

$(".mylink").click(function() {
   $(this).parents(".box").fadeOut("fast");
});

しかし...特定の親の<div class="something1">に到達する必要があります。

基本的に、誰かが直接参照することなく、上位の兄弟を参照する方法を教えてもらえますか？それを兄貴と呼ぼう。兄のクラス名を直接参照すると、ページ上のその要素のすべてのインスタンスがフェードアウトします。これは望ましい効果ではありません。

私はもう試した：

parents(".box .something1") ... no luck.
parents(".box > .something1") ... no luck.
siblings() ... no luck.

誰でも？ありがとう。

jqueryjquery-selectorsparentsiblings
90
Tom

.parents(".box .something1")を呼び出すと、セレクター.box .somethingに一致するすべての親要素が返されます。つまり、.something1であり、.boxの内部にある親要素を返します。

次のように、最も近い親の子を取得する必要があります。

$(this).closest('.box').children('.something1')

このコードは .closest を呼び出して、セレクターに一致する最も内側の親を取得し、その親要素で.childrenを呼び出して、探している叔父を見つけます。

135
SLaks
$(this).parent()

ツリートラバーサルは楽しい

$(this).parent().siblings(".something1");

$(this).parent().prev(); // if you always want the parent's previous sibling

$(this).parents(".box").children(".something1");

さらに多くの方法で、これらの docs が役立つかもしれません。

17
Anurag

これは、クラスboxを持つ最初の親を見つけ、次にsomethingに一致する正規表現を持つ最初の子クラスを見つけ、IDを取得します。

$(".mylink").closest(".box").find('[class*="something"]').first().attr("id")
12
user2601995

あなたの問題を正しく理解していれば、$(this).parents('.box').children('.something1')これはあなたが探しているものですか？

6
Teja Kantamneni

.each()と括弧内のセレクターで.children()を使用できます。

//Grab Each Instance of Box.
$(".box").each(function(i){

    //For Each Instance, grab a child called .something1. Fade It Out.
    $(this).children(".something1").fadeOut();
});
4
Olly