jQuery中如何找到匹配选择器的最近下一个兄弟元素？

现有如下DOM结构，其中包含若干组元素：每组有专属的headerx类，同组内的元素共享groupx和groupxbottom类，组内<li>元素的数量不固定。

我已经获取了所有带有特定headerx类的标题元素：

let headers = $('.header1');

接下来需要隐藏每组对应的groupxbottom元素。我已经通过match()提取出了匹配groupxbottom的选择器并保存到selector变量中，但这个选择器会匹配所有同类的groupxbottom元素，我需要的是每个标题元素对应的、最近的下一个兄弟元素中的那个groupxbottom。

请问在遍历headers时，如何精准匹配到对应的目标元素？当前遍历代码框架如下：

headers.each(function() {
   $(this).(.. 这里需要填入匹配对应最近兄弟元素的代码 ..).hide();
});

示例DOM结构：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<li class="header1 group1">Header1 Group1</li>
<li class="group1"></li>
<li class="group1"></li>
<li class="group1"></li>
<li class="group1"></li>
<li class="group1"></li>
<li class="group1bottom">Group 1 bottom</li>

<li class="header1 group2">Header1 Group2</li>
<li class="group2"></li>
<li class="group2"></li>
<li class="group2bottom">Group2 bottom</li>

<li class="header2 group1">Header2 Group1</li>
<li class="group1"></li>
<li class="group1"></li>
<li class="group1bottom">Group1 bottom</li>

直接用jQuery的nextAll()结合.first()就能实现需求，从当前标题元素的后续兄弟节点中，精准定位到第一个匹配selector的组尾元素：

headers.each(function() {
   $(this).nextAll(selector).first().hide();
});

逻辑说明 #

• nextAll(selector)：抓取当前元素之后所有符合选择器条件的兄弟元素
• .first()：从匹配结果里取第一个元素，也就是离当前标题最近的那个groupxbottom，不会误选其他组的同类元素

如果场景更复杂，担心跨组匹配，也可以用更严谨的写法：先限定当前标题到下一个标题之间的元素范围，再筛选目标元素：

headers.each(function() {
   $(this).nextUntil('[class^="header"]').filter(selector).hide();
});

• nextUntil('[class^="header"]')：只取当前元素到下一个带header开头类名元素之间的兄弟元素，彻底限定在当前组内
• .filter(selector)：在这个范围内筛选出目标groupxbottom元素

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