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 の呼び出しでこれをコンテキスト セレクターとして使用します。

$(".in",this)

完全なコード:

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

フィドル: http://jsfiddle.net/kfBDJ/5/