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>

Это неверно, но как мне это сделать, используя jQuery, чтобы показать класс "roll", который содержится внутри при наведении курсора на один из этих элементов div.

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

Есть идеи? :)

Answer 1

Используйте форму jQuery(expression, context):

$('.roll', this)

Answer 2

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

Просто общий совет: везде, где это возможно с jQuery и CSS, будьте конкретны в своих селекторах. Попробуйте использовать селекторы классов без тега в качестве крайней меры.

• Лучший: # id
• Хорошо: tag или tag.class
• Худший: .класс

Почему? Ну, селектор типа ".upcoming" должен в основном проходить по всему дереву или поддереву. Есть методы DOM для ускорения двух других (getElementById или getElementsByName соответственно). Это может существенно повлиять на время загрузки страницы.

Answer 3

В данном конкретном случае

$(this).next()

также даст вам ссылку на дочерний элемент .roll div.