jquery - jQuery nextUntil匹配嵌套元素

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

说我有这个标记：

<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与


一个包含选择器表达式的字符串，用于指示在哪里停止与同级元素匹配。


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

定位的其他唯一对象是我单击的<h5>-必须保留，因为它告诉它要在其上应用nextUntil()条件的元素。

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

最佳答案

您只需将.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>

关于jquery - jQuery nextUntil匹配嵌套元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57202504/