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);
    });
});

请参阅FIDDLE DEMO

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

谢谢！

Answer 1

使用上下文选择器

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

<强>代码

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

<强> Check Fiddle

Answer 2

使.in选择器相对于this：

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

Corrected fiddle

Answer 3

试试这个

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

updated jsFiddle File

Answer 4

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

$(".in",this)

完整代码：

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

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

每个div的单独jquery操作

4 个答案: