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.

誰でも？ありがとう。

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

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

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

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

$(this).parent()

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

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

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

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

さらに多くの方法で、これらのドキュメントが役立つ場合があります。

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

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

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

あなたは使うことができ.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();
});