jQuery Div Elternteil und Kind

Question

Richtig, sagen wir, ich habe diese wiederholten divs.

<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> 

Dies ist falsch, aber wie betreibe ich dies mit jQuery die „Rolle“ Klasse innerhalb gehalten zu offenbaren, wenn sie über eine dieser divs schwebte.

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

Irgendwelche Ideen? :)

Answer 1

Verwenden Sie die jQuery(expression, context) Form:

$('.roll', this) 

Answer 2

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

Nur ein allgemeiner Tipp: wo immer möglich, sowohl mit jQuery und CSS in Ihre Selektoren spezifisch sein. Versuchen Sie Klassenselektoren ohne Tag als letztes Mittel zu verwenden.

• Best: #ID
• Gut: Tag oder tag.class
• Worst: .class-

Warum? Nun, ein Selektor wie ".upcoming" muss grundsätzlich den gesamten Baum oder Teilbaum durchlaufen. Das sind DOM-Methoden, um die anderen beiden zu beschleunigen (getElementById bzw. getElementsByName). Dies kann die Seitenladezeiten erheblich beeinflussen.

Answer 3

In diesem speziellen Fall

 
$(this).next() 

würden Sie auch einen Verweis auf das Kind vom Klebeband div geben.