特定行的Jquery div选择器

时间:2011-11-13 17:55:51

标签: jquery css closest

我有以下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');
});

请帮帮我。

3 个答案:

答案 0 :(得分:2)

使用this引用已点击的内容,然后仅在父li中搜索:

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

使用.closest("li").find('.data_delete')之类的内容会使您的代码更少依赖于您拥有的确切HTML结构。这会找到您所在的li,然后搜索.data_delete中的li

答案 1 :(得分:0)

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

答案 2 :(得分:0)

首先用$(this)替换$ this:

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

这应该更好;)。