如何用jQuery获取起始元素后、终止元素前的特定class元素？

首先，你想要选中.start之后、.stop之前的所有.yes元素，当前的代码会把中间所有元素都标黄（包括.no），对吧？这里有两种直接的解决办法：

方法1：先拿范围再过滤 #

先用nextUntil()拿到.start到.stop之间的所有元素，再用filter()筛出带.yes类的目标元素：

$('.start').nextUntil('.stop').filter('.yes').css('background', 'yellow');

这样就只会给你想要的.yes元素加上黄色背景啦。

方法2：用nextUntil()自带的过滤参数 #

其实nextUntil()本身就支持第二个参数用来过滤，一步到位更省心：

$('.start').nextUntil('.stop', '.yes').css('background', 'yellow');

这个第二个参数相当于内置了filter的逻辑，直接返回范围内符合条件的元素，代码更简洁。

这得从jQuery的API设计逻辑来说：

• nextAll()的作用是获取当前元素之后所有同辈元素，它本身并没有绑定.until()方法，因为.until()的核心是限定范围，而nextUntil()已经把“从当前元素开始，直到某个元素截止”的范围逻辑整合进去了，同时还支持过滤。
• jQuery的API设计倾向于把这类组合逻辑打包成一个方法（比如nextUntil带过滤参数），而不是拆成多个链式方法，这样能保持API的一致性，也避免了方法过多导致的混乱。
• 当然如果你真的想要类似写法，也可以自己封装个小插件，但说实话原生的写法已经足够高效好用，完全没必要多此一举。

给你贴个完整的可运行代码，直接就能看到效果：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="start">start</div>
<div class="yes">yes</div>
<div class="no">no</div>
<div class="yes">yes</div>
<div class="no">no</div>
<div class="yes">yes</div>
<div class="no">no</div>
<div class="stop">stop</div>
<script>
$('.start').nextUntil('.stop', '.yes').css('background', 'yellow');
</script>

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