jquery nextUntil 匹配嵌套元素

Question

如何使用nextUntil() ( https://api.jquery.com/nextuntil/ ) 在 jquery 3.2.1 中向一组标题之间匹配的元素添加一个类？

假设我有这个标记:

<h5>Foo</h5>
<p><a href="#">Item 1</a></p>
<p><a href="#">Item 2</a></p>
<p><a href="#">Item 3</a></p>

<h5>Bar</h5>
<p><a href="#">Item 4</a></p>
<p><a href="#">Item 5</a></p>

<h5>Baz</h5>
<p><a href="#">Item 6</a></p>
<p><a href="#">Item 7</a></p>
<p><a href="#">Item 8</a></p>
<p><a href="#">Item 9</a></p>

我的意图是添加 .active给大家上课<a>给定<h5>下的元素.

我知道我可以将点击定位在 <h5>像这样:

$('h5').click(function(e) {

});

但是如果我尝试使用这个:

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

它不会工作，因为它添加了 .active到<p>而不是 <a> ，例如单击“栏”:

<h5>Bar</h5>
<p class="active"><a href="#">Item 4</a></p>
<p class="active"><a href="#">Item 5</a></p>

而我想要:

<h5>Bar</h5>
<p><a class="active" href="#">Item 4</a></p>
<p><a class="active" href="#">Item 5</a></p>

我如何定位 <a>这里面？来自 nextUntil() 的文档我看不出这是如何工作的，因为选择器通过了 h5 , 涉及

A string containing a selector expression to indicate where to stop matching following sibling elements.

所以这是正确的，因为我想停在下一个 <h5> .

唯一的其他目标是 <h5>我点击了 - 必须保留，因为它告诉它应用 nextUntil() 哪些元素条件开启。

那么如何定位内部选择器，例如p > a ，在每个标题下面？

Answer 1

您只需将 .nextUntil() 与 .find() 结合起来即可来做到这一点。

演示:

$('h5').click(function(e) {
    $(this).nextUntil('h5').find("a").addClass('active');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h5>Foo</h5>
<p><a href="#">Item 1</a></p>
<p><a href="#">Item 2</a></p>
<p><a href="#">Item 3</a></p>

<h5>Bar</h5>
<p><a href="#">Item 4</a></p>
<p><a href="#">Item 5</a></p>

<h5>Baz</h5>
<p><a href="#">Item 6</a></p>
<p><a href="#">Item 7</a></p>
<p><a href="#">Item 8</a></p>
<p><a href="#">Item 9</a></p>