jQuery基于當(dāng)前元素進(jìn)行下一步的遍歷
更新時(shí)間:2014年05月20日 09:18:59 作者:
通過jQuery方法選中了元素,如何基于這些已經(jīng)選中的元素進(jìn)行下一步的遍歷呢?下面有個(gè)不錯的示例,大家可以參考下
如果我們已經(jīng)通過jQuery方法選中了一組元素,那么如何基于這些已經(jīng)選中的元素進(jìn)行下一步的遍歷呢?
例如,我們通過
$('li:eq(1)')
選中了以下代碼中的第二個(gè)li元素。
<ul>
<li><a href="#">link</a></li>
<li><a href="#">selected link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
基于這個(gè)選中的元素,我們可以進(jìn)一步遍歷其他元素
下一個(gè)元素
$('li:eq(1)').next()
前一個(gè)元素
$('li:eq(1)').prev()
父元素
$('li:eq(1)').parent()
所有兄弟元素
$('li:eq(1)').parent().children()
所有后續(xù)兄弟元素
$('li:eq(1)').nextAll()
所有前續(xù)兄弟元素
$('li:eq(1)').prevAll()
以上所有的遍歷方法都可以使用end()方法來取消操作。
當(dāng)然,也可以使用參數(shù),例如
$('li:eq(1)').parent().children(':last')
例如,我們通過
$('li:eq(1)')
選中了以下代碼中的第二個(gè)li元素。
復(fù)制代碼 代碼如下:
<ul>
<li><a href="#">link</a></li>
<li><a href="#">selected link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
基于這個(gè)選中的元素,我們可以進(jìn)一步遍歷其他元素
下一個(gè)元素
$('li:eq(1)').next()
前一個(gè)元素
$('li:eq(1)').prev()
父元素
$('li:eq(1)').parent()
所有兄弟元素
$('li:eq(1)').parent().children()
所有后續(xù)兄弟元素
$('li:eq(1)').nextAll()
所有前續(xù)兄弟元素
$('li:eq(1)').prevAll()
以上所有的遍歷方法都可以使用end()方法來取消操作。
當(dāng)然,也可以使用參數(shù),例如
$('li:eq(1)').parent().children(':last')
您可能感興趣的文章:
- jQuery遍歷DOM的父級元素、子級元素和同級元素的方法總結(jié)
- jQuery遍歷DOM元素與節(jié)點(diǎn)方法詳解
- JQuery 兩種方法解決剛創(chuàng)建的元素遍歷不到的問題
- JQuery中使用.each()遍歷元素學(xué)習(xí)筆記
- jquery遍歷select元素(實(shí)例講解)
- JS Jquery 遍歷,篩選頁面元素 自動完成(實(shí)現(xiàn)代碼)
- 基于jQuery的遍歷同id元素 并響應(yīng)事件的代碼
- jQuery遍歷DOM節(jié)點(diǎn)操作之filter()方法詳解
- jQuery向上遍歷DOM樹之parents(),parent(),closest()之間的區(qū)別
- 舉例講解jQuery對DOM元素的向上遍歷、向下遍歷和水平遍歷
相關(guān)文章
jQuery內(nèi)容折疊效果插件用法實(shí)例分析(附demo源碼)
這篇文章主要介紹了jQuery內(nèi)容折疊效果插件用法,結(jié)合實(shí)例形式分析了jQuery展開折疊插件jquery.coolfieldset.js的具體使用技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04jQuery實(shí)現(xiàn)div隨意拖動的實(shí)例代碼(通用代碼)
這篇文章主要介紹了jQuery實(shí)現(xiàn)div隨意拖動的實(shí)例代碼,涉及到j(luò)query div隨意拖動相關(guān)知識,感興趣的朋友一起學(xué)習(xí)吧2016-01-01jQuery下實(shí)現(xiàn)等待指定元素加載完畢(可改成純js版)
下面就是我想到的等待元素出現(xiàn)方法,雖然是基于jQuery的,但是代碼很簡潔,可以修改成純js版的,感興趣的朋友可以參考下哈,希望對大家有所幫助2013-07-07jquery實(shí)現(xiàn)的動態(tài)回到頂部特效代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)的動態(tài)回到頂部特效代碼,涉及jQuery基于時(shí)間函數(shù)的定時(shí)遞歸調(diào)用實(shí)現(xiàn)帶緩沖效果的移動功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10jQuery中綁定事件bind() on() live() one()的異同
本文主要介紹了jQuery中綁定事件bind() on() live() one()的異同,具有很好的參考價(jià)值,下面跟著小編一起來看下吧2017-02-02jquery UI實(shí)現(xiàn)autocomplete在獲取焦點(diǎn)時(shí)得到顯示列表功能示例
這篇文章主要介紹了jquery UI實(shí)現(xiàn)autocomplete在獲取焦點(diǎn)時(shí)得到顯示列表功能,結(jié)合實(shí)例形式分析了jquery UI實(shí)現(xiàn)autocomplete事件響應(yīng)及顯示下拉列表功能操作技巧,需要的朋友可以參考下2019-06-06jQuery動態(tài)設(shè)置form表單的enctype值(實(shí)現(xiàn)代碼)
本篇文章是對在jQuery中動態(tài)設(shè)置form表單的enctype值的實(shí)現(xiàn)代碼進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-07-07