jQuery基于當(dāng)前元素進(jìn)行下一步的遍歷
更新時間:2014年05月20日 09:18:59 作者:
通過jQuery方法選中了元素,如何基于這些已經(jīng)選中的元素進(jìn)行下一步的遍歷呢?下面有個不錯的示例,大家可以參考下
如果我們已經(jīng)通過jQuery方法選中了一組元素,那么如何基于這些已經(jīng)選中的元素進(jìn)行下一步的遍歷呢?
例如,我們通過
$('li:eq(1)')
選中了以下代碼中的第二個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>
基于這個選中的元素,我們可以進(jìn)一步遍歷其他元素
下一個元素
$('li:eq(1)').next()
前一個元素
$('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)')
選中了以下代碼中的第二個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>
基于這個選中的元素,我們可以進(jìn)一步遍歷其他元素
下一個元素
$('li:eq(1)').next()
前一個元素
$('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é)點方法詳解
- JQuery 兩種方法解決剛創(chuàng)建的元素遍歷不到的問題
- JQuery中使用.each()遍歷元素學(xué)習(xí)筆記
- jquery遍歷select元素(實例講解)
- JS Jquery 遍歷,篩選頁面元素 自動完成(實現(xiàn)代碼)
- 基于jQuery的遍歷同id元素 并響應(yīng)事件的代碼
- jQuery遍歷DOM節(jié)點操作之filter()方法詳解
- jQuery向上遍歷DOM樹之parents(),parent(),closest()之間的區(qū)別
- 舉例講解jQuery對DOM元素的向上遍歷、向下遍歷和水平遍歷
相關(guān)文章
jQuery+jsp實現(xiàn)省市縣三級聯(lián)動效果(附源碼)
這篇文章主要介紹了jQuery+jsp實現(xiàn)省市縣三級聯(lián)動效果,以完整實例形式分析了jQuery結(jié)合jsp讀取MySQL數(shù)據(jù)庫操作實現(xiàn)省市縣三級聯(lián)動效果的相關(guān)技巧,并附帶完整實例源碼供讀者下載參考,需要的朋友可以參考下2015-12-12
jQuery+CSS3+Html5實現(xiàn)彈出層效果實例代碼(附源碼下載)
款Jquery+CSS3+Html5實現(xiàn)彈出層效果,應(yīng)用范圍很廣泛,比如用在消息提示、彈出層顯示內(nèi)容、彈出層登錄等,帶遮罩效果,非常實用,對此功能感興趣的朋友可以參考下本地代碼2016-05-05
jquery使用echarts實現(xiàn)有向圖可視化功能示例
這篇文章主要介紹了jquery使用echarts實現(xiàn)有向圖可視化功能,結(jié)合完整實例形式分析了jquery的echarts.js插件實現(xiàn)有向圖可視化相關(guān)實現(xiàn)技巧與操作注意事項,需要的朋友可以參考下2019-11-11
jQuery checkbox選中問題之prop與attr注意點分析
這篇文章主要介紹了jQuery checkbox選中問題之prop與attr注意點,結(jié)合form表單實例形式分析了針對火狐瀏覽器下checkbox失效情況的處理技巧,需要的朋友可以參考下2016-11-11
jQuery實現(xiàn)背景彈性滾動的導(dǎo)航效果
這篇文章主要介紹了jQuery實現(xiàn)背景彈性滾動導(dǎo)航效果的方法,涉及jQuery動態(tài)操作頁面元素樣式的相關(guān)技巧,需要的朋友可以參考下2016-06-06
Jquery on方法綁定事件后執(zhí)行多次的解決方法
下面小編就為大家?guī)硪黄狫query on方法綁定事件后執(zhí)行多次的解決方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
JQuery 操作Javascript對象和數(shù)組的工具函數(shù)小結(jié)
JQuery提供了很多實用的工具函數(shù)。這些函數(shù)主要分為兩類,操作集合數(shù)組的函數(shù)和非集合數(shù)組函數(shù)。2010-01-01

