jQuery - при щелчке по ссылке -> переключить только див, найденный по ссылке, которая вызвала событие

Question

Мое приложение программно генерирует некоторый HTML-код, подобный следующему:

<div class="container">
<div class="class1">
<a href="#" class="my-link">some link text 1</a>
</div>
<div class="class2">
some content 1
</div>
</div>

<div class="container">
<div class="class1">
<a href="#" class="my-link">some link text 2</a>
</div>
<div class="class2">
some content 2
</div>
</div>
.........
over and over again

Используя jQuery, когда я нажимаю на любую ссылку (внутри <div class="class1">), я хочу переключить только <div class="class2">, найденный подссылка, которая вызвала событие.

Как видите, имена классов повторяются снова и снова для каждого блока «контейнера».

Есть идеи, как этого добиться?Спасибо!

Answer 1

Вы могли бы сделать что-то вроде этого.

$(".my-link").click(function(){
    $(this).closest("div").next(".class2").toggle();
});

Answer 2

$(".my-link").click( function() {
  $(this).parents(".container").find(".class2").toggle();
})

или

$(".my-link").click( function() {
  $(this).parent().next(".class2").toggle();
})

Answer 3

Попробуйте это:

$(function(){
 $(".my-link").click(function(){
  $(this).parent().next(".class2").toggle();
 });
});

Answer 4

Селектор «next» jQuery возвращает следующий элемент-брат.

$('.class1').click(function(e) {
  $(this).next().toggle();
});