摘要：jquery提供了很多遍歷數據的方法，常見的方法有：next(), nextAll(), prev(), prevAll(), siblings()，以上的方法無非都是選擇緊挨著的兄弟元素、或所有的兄弟元素、今天來說一下這兩種方法：nextUntil()和prevUntil()，這兩個方法主要是提供了一個范圍查找...

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方法相同，只不過一個是向下查找，一個是向上查找。