您现在的位置是：首页 > 前端 > js网站首页js

jquery提供了很多遍历数据的方法，常见的方法有：next(), nextAll(), prev(), prevAll(), siblings()

以上的方法无非都是选择紧挨着的兄弟元素、或所有的兄弟元素、今天来说一下这两种方法：

nextUntil()和prevUntil()

语法：

$(selector).nextUntil(stop,filter)
$(selector).prevUntil(stop,filter)

这两个方法主要是提供了一个范围查找，返回 selector 与 stop 之间的每个元素之后的所有同级元素，selector不包括被选择器，同级元素是共享相同父元素的元素。

参数：

stop可选。表示在哪里停止搜索元素之后匹配的同级元素的选择器表达式、元素、jQuery 对象。

filter可选。规定缩小搜索介于 selector 与 stop 之间的同级元素范围的选择器表达式。

注意：如需返回多个同级元素，请使用逗号分隔每个表达式。

例一：

查找跟随 <dt id="term-2"> 的同胞元素，直到下一个 <dt>，然后将它们设置为红色背景色。同时，找到跟随 <dt id="term-1"> 的 <dd> 同胞元素，直到 <dt id="term-3">，并为它们设置蓝色文本颜色。

<dl>
  <dt id="term-1">term 1</dt>
  <dd>definition 1-a</dd>
  <dd>definition 1-b</dd>
  <dd>definition 1-c</dd>
  <dd>definition 1-d</dd>
  <dt id="term-2">term 2</dt>
  <dd>definition 2-a</dd>
  <dd>definition 2-b</dd>
  <dd>definition 2-c</dd>
  <dt id="term-3">term 3</dt>
  <dd>definition 3-a</dd>
  <dd>definition 3-b</dd>
</dl>


<script>
  $("#term-2").nextUntil("dt").css("background-color", "red");
  var term3 = document.getElementById("term-3");
  $("#term-1").nextUntil(term3, "dd").css("color", "blue");
</script>

例二：

返回在类名为 "start" 和 "stop" 的两个 <li> 元素之间的所有同级元素

<div style="width:500px;" class="siblings">
  <ul>ul (父节点)  
    <li>li (兄弟节点)</li>
    <li>li (兄弟节点)</li>
    <li class="start">li (类名为"start"的兄弟节点)</li>
    <li>li (类名为"start"的li节点的下一个兄弟节点)</li>
    <li>li (类名为"start"的li节点的下一个兄弟节点)</li>
    <li>li (类名为"start"的li节点的下一个兄弟节点)</li>
    <li class="stop">li (类名为"stop"的兄弟节点)</li>
  </ul>   
</div>

<script>
$(document).ready(function(){
$("li.start").nextUntil("li.stop").css({"color":"red","border":"2px solid red"});
});
</script>

在这个例子中,我们返回在类名为“star”和类名为“stop”的 li元素之间的所有下一个兄弟元素。

prevUntil方法与nextUntil方法相同，只不过一个是向下查找，一个是向上查找。