jquery - 特定の行の Jquery div セレクター

Question

行として次のliがあります.私の要件は、アンカーの削除をクリックすると、ポップアップdivが表示されることです。

<li class="select">
  <div class="data_options"><a href="#" class="itemDelete">DELETE</a> </div> 
<!-- row hover options here-->
      <!-- popup starts here-->
    <div class="data_popup data_delete"><span class="tip"></span>Are you sure want to delete this file?
  </div>
 <!-- popup ends here--> 
  <div class="cfix"></div>
</li>

これを試しましたが、行全体に影響しています。特定の行でのみポップアップが必要です。

$('.itemDelete').live('click', function() {
$('.data_delete').slideToggle('medium');
});

これは機能しません。

$('.itemDelete').live('click', function() {
$this.closest('.data_delete').slideToggle('medium');
});

私を助けてください。

Answer 1

thisクリックされたものを参照し、親でのみ検索するために使用しliます。

$('.itemDelete').live('click', function() {
    $(this).closest("li").find('.data_delete').slideToggle('medium');
});

.closest("li")やのようなものを使用すると.find('.data_delete')、コードが実際の HTML 構造に大きく依存しなくなります。liこれは、あなたがいるものを見つけて、その.data_delete中の を検索しliます。

Answer 2

$('.itemDelete').live('click', function() {
    $(this).parent().next('.data_delete').slideToggle('medium');
});

Answer 3

最初に $this を $(this) に置き換えます。

$('.itemDelete').live('click', function() {
    $(this).closest('.data_delete').slideToggle('medium');
});

それはうまくいくはずです;）。