jQuery分区父分区和子分区

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来显示内部持有的"roll“类呢？

<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
• Good: tag or tag.class
• Worst：.class

为什么？嗯，像".upcoming“这样的选择器基本上必须遍历整个树或子树。有一些DOM方法可以提高其他两种方法(分别是getElementById或getElementsByName )的速度。这对页面加载时间有很大的影响。