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来操作它来显示当悬停在其中一个div上时保持在里面的“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
好：tag或tag.class
最差：.class

为什么呢？好吧，像“.upcoming”这样的选择器必须基本遍历整个树或子树。这是用于加速其他两个（分别是getElementById或getElementsByName）的DOM方法。它可以对页面加载时间产生重大影响。

Answer 3

在这个特定情况下

$(this).next()

还会给你一个孩子.roll div。

的引用

jQuery Div父母和孩子

3 个答案: