簡単な例を挙げると、ページ上で次のブロックが何度も繰り返されています(動的に生成されます)。
<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");
さらに多くの方法で、これらの docs が役立つかもしれません。
これは、クラス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();
});