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

当我点击任何链接（<div class="class1">内）时使用jQuery我想只切换触发该事件的该链接下找到的<div class="class2">。

正如您所看到的，对于每个“容器”div块，类名重复一遍又一遍。

知道怎么做到这一点？谢谢！

Answer 1

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

或

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

Answer 2

你可以这样做。

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

Answer 3

“next”jQuery选择器返回下一个兄弟元素。

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

Answer 4

试试这个：

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

jQuery - 点击链接 - ＆gt;切换触发事件的链接下找到的div

4 个答案: