如何在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/