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

Сначала замените $ this на $ (this):

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

Это должно работать лучше;).

Answer 3

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