如何用jQuery为多组同class元素单独实现toggleClass切换？

现有如下HTML结构，共3组内容，每组包含一个news-btn按钮和一个content内容段落：

<p class="news-btn">Click here</p>
<p class="content">Content 1</p>

<hr>

<p class="news-btn">Click here</p>
<p class="content">Content 2</p>

<hr>

<p class="news-btn">Click here</p>
<p class="content">Content 3</p>

当前用jQuery的toggleClass时，点击任意news-btn会切换所有content的类，原因是所有content共用同一个类名。不想给每个content加唯一类（避免重复写代码），需要实现点击对应按钮只切换同组的content元素。

可行方案 #

方法1：直接用next()定位相邻元素 #

因为每组里news-btn的下一个兄弟元素就是对应的content，这种场景下用next()最直接：

$('.news-btn').click(function() {
  $(this).next('.content').toggleClass('目标类名');
});

$(this)指代当前被点击的按钮，next('.content')精准获取按钮后紧邻的content元素，执行toggleClass只会操作对应组的内容。

方法2：用siblings()筛选同组兄弟元素 #

如果后续结构调整，content不再是按钮的紧邻元素，可使用siblings()在同组内筛选：

$('.news-btn').click(function() {
  $(this).siblings('.content').toggleClass('目标类名');
});

该方法会找到当前按钮的所有兄弟元素中class为content的元素，适合同组元素在同一父级下的场景。

方法3：通过父容器限定范围（推荐结构化场景） #

如果给每组添加父容器（比如<div class="news-group">），可以用closest()定位父容器，再在容器内查找content，扩展性更强：
修改后的HTML结构：

<div class="news-group">
  <p class="news-btn">Click here</p>
  <p class="content">Content 1</p>
</div>
<hr>
<div class="news-group">
  <p class="news-btn">Click here</p>
  <p class="content">Content 2</p>
</div>
<hr>
<div class="news-group">
  <p class="news-btn">Click here</p>
  <p class="content">Content 3</p>
</div>

对应的jQuery代码：

$('.news-btn').click(function() {
  $(this).closest('.news-group').find('.content').toggleClass('目标类名');
});

这种方式不受组内元素顺序影响，结构更健壮，后续调整组内元素位置也不会影响功能。

内容的提问来源于stack exchange，提问作者Janath