javascript - 隐藏最近的元素

Question

我有一些jquery来隐藏索引页面上的内容。

小提琴中注释掉的代码是我目前拥有的 - 但如果单击任何切换链接，它会隐藏所有内容 div。

HTML

<div>
  <h1>Dogs</h1>
  <a class="toggle_group_name">∆&lt;/a>
</div>

<div class="group_name">
    Dogs do this, that and something
</div>

<div>
  <h1>Cats</h1>
  <a class="toggle_group_name">∆&lt;/a>
</div>

<div class="group_name">
    Cats do this, that and something different
</div>

jQuery

$(function() {
    $('.toggle_group_name').click(function() {
        $(this).parents("div").find('.group_name').toggle();
    });
});

我只想隐藏/显示紧跟在切换链接后面的类，但不能让它工作。尝试使用parents,nextAll和我在 SO 上找到的类似示例中的各种其他方法，但到目前为止没有任何效果。

Answer 1

目标元素不是被点击元素的兄弟或父元素，它是被点击元素的父元素的下一个兄弟，所以.parents()和.nextAll()方法在这种情况下没有用，你可以使用.closest()/parent()和.next()方法：

$(this).closest('div') // closest parent div of the clicked element 
       .next('.group_name') // it's next .group_name sibling
       .toggle();

http://jsfiddle.net/xUgG5/

Answer 2

这似乎在你的小提琴中工作：

$(function() {
  $('.toggle_group_name').click(function() {
    $(this).parents("div").next('.group_name').toggle();
  });
});

Answer 3

只需使用 first()。

http://jsfiddle.net/P6GEC/9/

$(function () {
    $('.toggle_group_name').click(function () {
        $('.group_name').first().toggle();
    });
});

http://api.jquery.com/first/