jquery - jqueryで表示する（this）内のdivを特定します

Question

http://s199881165.onlinehome.us/transfem/newlayout/indexlisttrypopupquestion.php

上記は私が取り組んでいるページです。タイムラインのタイルにマウスオーバーすると、各タイルの下に配置された一連の div がポップアップ表示されます。

ただし、タイルごとに THE ONE CORRESPONDING div のみを表示したいと思います。

 $('#sortable1 li').mouseenter(function()
    {

          $( '.infofloat').show( "scale", 300 );


      });

      $('#sortable1 li').mouseleave(function()
    {
          $( '.infofloat').hide( "scale", 300 );
    });

そしてhtml

<div class="timelinehouse_div" id="theone<? echo $nummy;?>"><div class="thumbnail" style="background-image: url(<? echo $piccy;?>);"></div>
 <div class="meta"><div class='coverup'></div><? echo $tittie; ?></div></div>
  <div class="infofloat"><div class='arrowtop'></div></div>
</li>

Answer 1

.infofloatコンテキストを使用すると、リスト項目内のみをターゲットにできます。

$('#sortable1 li').on({
    mouseenter: function() {
          $( '.infofloat', this).show( "scale", 300 );
    },
    mouseleave: function() {
          $( '.infofloat', this).hide( "scale", 300 );
    }
});

楽しみのために、短いバージョンは次のようになります。

$('#sortable1 li').on('mouseenter mouseleave', function(e) {
    $( '.infofloat', this)[e.type=='mouseenter'?'show':'hide']( "scale", 300 );
});

Answer 2

$(this)現在のターゲットを使用し、 find()liを使用して対応する子 divを取得する必要があります。.infofloat

$('#sortable1 li').mouseenter(function() {
    $(this).find( '.infofloat').show( "scale", 300 );
});

$('#sortable1 li').mouseleave(function() {
    $(this).find( '.infofloat').hide( "scale", 300 );
});

Answer 3

find()次の方法を使用できます。

$(this).find('.infofloat').show( "scale", 300 );