j查询一组元素<p>之间的目标<h4>元素组

Question

我有以下标记：

<h4>Option 1</h4>
<p>Foo</p>
<p>Bar</p>
<p>Baz</p>
<h2>Option 2</h4>
<p>abc</p>
<p>def</p>
<p>ghi</p>
...
<h4>Option 1000</h4>
<p>123</p>
<p>456</p>
<p>789</p>

我试图实现的是，当单击标题时，在<h4>下方的所有<p>标签上添加一个.active类。

使用 jquery (3.2.1)，我的目标是<h4>并确定它是否已被点击：

$('h4').click(function (e) {
});

我的目的是只定位点击<h4>下方的<p>标签，而忽略任何其他标签。我看不到如何在jquery中执行此操作，因此求助于为每个选项系列添加类，例如

<h4 class="option1">Option 1</h4>
<p class="option1">Foo</p>
<p class="option1">Bar</p>
<p class="option1">Baz</p>

然后我可以读取类名。例如，这给出了"选项1"：

$('h4').click(function() {
var clickedClass = $(this).attr("class");
console.log(clickedClass); 
});

使用clickedClass然后我可以定位相关元素并应用另一个类，在本例中.active：

$(clickedClass).addClass('active');

虽然这有效，但它似乎使我的标记膨胀，因为我添加了很多类只是为了做到这一点。

有没有更简单的方法使用问题开头给出的标记集(没有类名)，您可以通过这种方式定位子<p>标签？

目的是，如果您单击"选项 1"，它将仅.active应用于单击的元素和子元素<p>，因此生成的标记应如下所示：

<h4 class="active">Option 1</h4>
<p class="active">Foo</p>
<p class="active">Bar</p>
<p class="active">Baz</p>
<h2>Option 2</h4>
<p>abc</p>
<p>def</p>
<p>ghi</p>
...
<h4>Option 1000</h4>
<p>123</p>
<p>456</p>
<p>789</p>

Answer 1

您需要使用的功能是nextUntil()。它将选择当前元素和同级之间的所有元素，这些元素与提供的选择器匹配。

$('h4').click(function(e) {
$(this).nextUntil('h4').addClass('active');
});

.active {
color: #C00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4>Option 1</h4>
<p>Foo</p>
<p>Bar</p>
<p>Baz</p>
<h4>Option 2</h4>
<p>abc</p>
<p>def</p>
<p>ghi</p>
<h4>Option 1000</h4>
<p>123</p>
<p>456</p>
<p>789</p>