jQuery Div parent and child

Question

Hello,

Right, lets say I have these repeated 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>

This is incorrect, but how do I operate this using jQuery to reveal the "roll" class held inside when hovering over one of those divs.

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

Any ideas? :)

Answer 1

Use the jQuery(expression, context) form:

$('.roll', this)

Answer 2

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

Just a general tip: wherever possible with both jQuery and CSS be specific in your selectors. Try to use class selectors with no tag as a last resort.

• Best: #id
• Good: tag or tag.class
• Worst: .class

Why? Well, a selector like ".upcoming" has to basically traverse the entire tree or subtree. Theere are DOM methods to speed up the other two (getElementById or getElementsByName respectively). It can make a significant difference to page load times.

Answer 3

In this specific case

$(this).next()

would also give you a reference to child .roll div.