jQuery 遍歷-nextUntil()方法以及prevUntil()方法的使用介紹
nextUntil() 獲得每個(gè)元素所有跟隨的同胞元素，當(dāng)有參數(shù)時(shí)，則直到遇到該方法的參數(shù)所匹配的元素時(shí)會(huì)停止搜索。返回的新 jQuery 對(duì)象包含所有跟隨的同胞元素，但不包括被選擇器、DOM 節(jié)點(diǎn)或已傳遞的 jQuery 對(duì)象匹配的元素。如果沒有參數(shù)，則會(huì)選取所有跟隨的同胞元素，此時(shí)與.nextAll()方法相同。
語(yǔ)法一：
.nextUntil(selector,filter)
語(yǔ)法二：
.nextUntil(element,filter)
詳細(xì)說明
如果給定一個(gè)表示 DOM 元素集合的 jQuery 對(duì)象，.nextUntil() 方法允許我們搜索 DOM 樹中的元素跟隨的同胞元素，當(dāng)遇到被該方法的參數(shù)所匹配的元素時(shí)會(huì)停止搜索。返回的新 jQuery 對(duì)象包含所有跟隨的同胞元素，但不包含被參數(shù)匹配的元素。
如果選擇器不匹配或未規(guī)定選擇器，則會(huì)選取所有跟隨的同胞，則該方法選取的元素與 .nextAll() 方法相同。
對(duì)于 jQuery 1.6，DOM 節(jié)點(diǎn)或 jQuery 對(duì)象，而不是選擇器，可傳遞到 .nextUntil() 方法。
該方法接受可選的選擇器表達(dá)式作為其第二參數(shù)。如果指定該參數(shù)，則將通過檢測(cè)元素是否匹配該選擇器來篩選它們。
先看下例子：
<dl>
<dt id="term-1">term 1</dt>
<dd>definition 1-a</dd>
<dd class="abc">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>
$("#term-2").nextUntil("dt").css("background-color", "red");
結(jié)果如下：
注意：
1、不包括自己。即上面的例子中不包括#term-2本身
2、不包括參數(shù)1所匹配的元素。即頭尾去掉。
3、如果選擇器不匹配或未規(guī)定選擇器，則會(huì)選取所有跟隨的同胞；比如：
$("#term-2").nextUntil("dts").css("background-color", "red");
我把上面的選擇器由原來的dt改為dts，得到的結(jié)果如下：
$("#term-1").nextUntil("#term-3", "dd").css("color", "blue");
//或者采用DOM元素：
//var term3 = document.getElementById("term-3");
//$("#term-1").nextUntil(term3, "dd").css("color", "blue");
$("#term-1").nextUntil("#term-3", ".abc").css("color", "blue");
結(jié)果如下：
下面看一下不提供篩選的選擇器的例子
$("#term-1").nextUntil("#term-3").css("color", "blue");
結(jié)果如下圖所示：
prevUntil()方法和nextUntil()方法差不多，區(qū)別就是一個(gè)往上，一個(gè)往下。
相關(guān)文章
jQuery左右滾動(dòng)支持圖片放大縮略圖圖片輪播代碼分享
這篇文章主要介紹了jQuery左右滾動(dòng)支持圖片放大縮略圖圖片輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-08-08
jquery+easeing實(shí)現(xiàn)仿flash的載入動(dòng)畫
本文主要給大家講述的是如何使用jquery+easeing實(shí)現(xiàn)仿flash的載入動(dòng)畫的方法，附上示例代碼，非常細(xì)致全面，這里推薦給大家，希望對(duì)大家熟練使用jQuery有所幫助。2015-03-03
這篇文章主要介紹了jQuery實(shí)現(xiàn)拖拽效果插件的方法,較為詳細(xì)的分析了jQuery拖拽效果的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-03-03
jQuery Mobile漏洞會(huì)有跨站腳本攻擊風(fēng)險(xiǎn)
人們經(jīng)常將跨站腳本攻擊(Cross Site Scripting)縮寫為CSS，但這會(huì)與層疊樣式表(Cascading Style Sheets, CSS)的縮寫混淆。因此有人將跨站腳本攻擊縮寫為XSS。2017-02-02
jQuery實(shí)現(xiàn)控制文字內(nèi)容溢出用省略號(hào)(…)表示的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)控制文字內(nèi)容溢出用省略號(hào)(…)表示的方法,涉及jQuery針對(duì)字符串及樣式操作相關(guān)技巧,需要的朋友可以參考下2016-02-02
這篇文章主要介紹了jQuery常見事件的監(jiān)聽方式，頁(yè)面經(jīng)常會(huì)有各種事件發(fā)生，事件發(fā)生后需要進(jìn)行一些特定處理，即執(zhí)行特定的函數(shù)或者語(yǔ)句。這就需要對(duì)事件進(jìn)行監(jiān)聽，下面關(guān)于監(jiān)聽事件的介紹，需要的小伙伴可以參考一下2022-03-03
本文主要是介紹了jQuery中on方法及trigger方法，以及圍繞這個(gè)方法來體驗(yàn)的觀察者模式，是篇非常不錯(cuò)的文章，對(duì)我們理解觀察者模式很有幫助。2014-12-12
使用ajaxfileupload.js實(shí)現(xiàn)ajax上傳文件php版
這篇文章主要介紹了使用ajaxfileupload.js實(shí)現(xiàn)ajax上傳文件php版,需要的朋友可以參考下2014-06-06
基于JQuery實(shí)現(xiàn)相同內(nèi)容合并單元格的代碼
我們就中和下利用JQuery來和他一個(gè)table里面相同內(nèi)容的單元格，這里代碼跟大家分享下，希望對(duì)大家有用2011-01-01
jQuery實(shí)現(xiàn)表單提交時(shí)判斷的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)表單提交時(shí)判斷的方法,涉及針對(duì)表單提交時(shí)的判斷方法,是非常實(shí)用的技巧,需要的朋友可以參考下2014-12-12