javascript - 每个 div 的单独 jquery 操作

Question

这是原始结构：

<div class="out">
 <div class="in">
 </div>
</div>
<div class="out">
 <div class="in">
 </div>
</div>
<div class="out">
 <div class="in">
 </div>
</div>

我添加 jquery 来切换“in” div。

$(document).ready(function() {
    $(".in").hide();
    $('.out').hover(function() {
        $(".in").slideToggle(100);
    });
});

见小提琴演示

但是，它控制所有对象，我不知道如何单独执行它们。

谢谢！

Answer 1

使用上下文选择器

$(".in", this).slideToggle(100);

代码

$(document).ready(function() {
    $(".in").hide();
    $('.out').hover(function() {
        $(".in", this).slideToggle(100);
    });
});

检查小提琴

Answer 2

使.in选择器相对于this：

$(document).ready(function() {
   $(".in").hide();
   $('.out').hover(function() {
       $(this).find(".in").slideToggle(100);
   });
});

更正的小提琴

Answer 3

尝试这个

 $(document).ready(function() {
   $(".in").hide();
        $('.out').hover(function() {
            $(this).children(".in").slideToggle(100);
    });
});

更新了 jsFiddle 文件

Answer 4

在调用 jQuery 时使用this作为上下文选择器，如下所示：

$(".in",this)

完整代码：

$(document).ready(function() {
  $(".in").hide();
  $('.out').hover(function() {
    $(".in",this).slideToggle(100);
  });
});

小提琴：http: //jsfiddle.net/kfBDJ/5/