jQuery Divの親と子

Question

そうですね、これらの繰り返しdivがあるとします。

<div class="upcoming"> 
<div class="roll" style="display:none">Hidden</div> 
</div> 
<div class="upcoming"> 
<div class="roll" style="display:none">Hidden</div> 
</div> 
<div class="upcoming"> 
<div class="roll" style="display:none">Hidden</div> 
</div> 

これは間違っていますが、どのように私はそれらのdiv要素の一つの上にマウスを移動するときの内側開催された「ロール」クラスを明らかにするのjQueryを使ってこれを操作します。

<script type="text/javascript"> 
$(document).ready(function() { 
    $(".upcoming").hover(function() { 
     $(this + ".roll").fadeIn("Fast"); 
    }, function() { 
     $(this + ".roll).fadeOut("Fast"); 
    }); 
}); 
</script> 

$('.roll', this) 

Answer 1

はjQuery(expression, context)形式を使用します。タグなしのクラスセレクタを最後の手段として使用してください。

• ベスト：タグまたはtag.class
• 最悪：

なぜ.classファイル

グッド#ID？つまり、 ".upcoming"のようなセレクタは、基本的にツリー全体またはサブツリー全体を走査する必要があります。 Theereは、他の2つを高速化するDOMメソッドです（それぞれgetElementByIdまたはgetElementsByName）。ページの読み込み時間に大きな違いがあります。この特定のケースで

Answer 2

$(function() { 
    $("div.upcoming").hover(function() { 
    $("div.roll", this).fadeIn("fast"); 
    }, function() { 
    $("div.roll", this).fadeOut("fast"); 
    }); 
}); 

ただ、一般的なヒント：可能な限りjQueryとCSSの両方では、あなたのセレクタで具体的に:)

Answer 3

 
$(this).next() 

はまた、あなたの子供.roll div要素への参照を与えるだろう。