CODEWITHSUNDEEP
jquery
James
James

Reputation: 6008

jQuery Div parent and child

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? :)

Upvotes: 1

Views: 658

Answers (3)

mveerman
mveerman

Reputation: 40867

In this specific case

$(this).next()

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

Upvotes: -1

cletus
cletus

Reputation: 625017

$(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.

Upvotes: 2

Noah Medling
Noah Medling

Reputation: 4669

Use the jQuery(expression, context) form:

$('.roll', this)

Upvotes: 5

Related Questions