向下遍历到下一个元素，而不是立即和不同类型

Question

所以在这样的html结构中：

    <a class="member-main">
      <!-- other divs and html elements -->
    </a>

    <div class="hidden-group-item">
      <!-- other divs and html elements -->
    </div>

我想将点击事件绑定到类.member-main 的html 元素，以便显示隐藏元素.hidden-group-item。

页面中有很多成对重复的元素，所以我也想只在其各自的.member-main 下方显示.hidden-group-item

在this previous question 的帮助下，我的目标是使用如下功能：

$('body').on('click', '.member-main', function() {
    $(this).next('.hidden-group-item')[0].toggleClass('hide')
});

我可以通过this 关键字（如果我在控制台记录它）获得点击关联的元素，但我似乎无法抓住那个让我遍历到隐藏组项的节点。

this 在这种情况下是如何工作的？实现这一目标的最有效方法是什么？

Answer 1

...[0] 返回一个 nodeElement 而不是具有函数toggleClass 的 jQuery 对象。试试这个：

$('body').on('click', '.member-main', function() {
    $(this).next('.hidden-group-item') // next is already returning one item so no need to try to access the first 
           .toggleClass('hide')
});

Answer 2

这按预期工作

关于 .next() 方法的文档说明如下：

获取集合中每个元素的紧随其后的兄弟 匹配的元素。如果提供了选择器，它将检索下一个 仅当它与该选择器匹配时才为兄弟。

因为您有 onClick 处理程序并且您将当前单击的元素选择为 $(this)，那么 匹配的元素集 只是您单击的元素，因此 next() 调用获取.hidden-group-item 就在它下面。

示例

$('body').on('click', '.member-main', function() {
  $(this).next('.hidden-group-item').toggleClass('hide')
});

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<a class="member-main">
  <!-- other divs and html elements -->
  hello
</a>

<div class="hidden-group-item hide">
  <!-- other divs and html elements -->
  hidden
</div>

<a class="member-main">
  <!-- other divs and html elements -->
  hello
</a>

<div class="hidden-group-item hide">
  <!-- other divs and html elements -->
  hidden
</div>

<a class="member-main">
  <!-- other divs and html elements -->
  hello
</a>

<div class="hidden-group-item hide">
  <!-- other divs and html elements -->
  hidden
</div>

JSFiddle