JQuery中節(jié)點(diǎn)遍歷方法實(shí)例
更新時(shí)間:2015年05月18日 14:33:18 作者:永遠(yuǎn)愛好寫程序
這篇文章主要介紹了JQuery中節(jié)點(diǎn)遍歷方法,實(shí)例分析了jQuery遍歷節(jié)點(diǎn)的技巧,需要的朋友可以參考下
本文實(shí)例講述了JQuery中節(jié)點(diǎn)遍歷方法。分享給大家供大家參考。具體如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery節(jié)點(diǎn)遍歷</title> <script src="jquery-1.6.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { //-----舉例1.獲取節(jié)點(diǎn)之前的挨著的第一個(gè)兄弟元素 //var $divs = $("#div2").prev("div"); //只獲取div //ShowArraysID($divs); //-----舉例2.獲取節(jié)點(diǎn)之前的所有兄弟元素 //var $divs = $("#div2").prevAll("div"); //只獲取div //var $divs = $("#div2").prevAll(); //獲取所有兄弟元素 //ShowArraysID($divs); //-----舉例3.獲取節(jié)點(diǎn)之后的挨著的第一個(gè)兄弟元素 //var $divs = $("#div2").next("div"); //只獲取div div2后緊挨著的是input所以返回零個(gè)元素 //ShowArraysID($divs); //-----舉例4.獲取節(jié)點(diǎn)之后的所有兄弟元素 類似prevAll 方向相反 //var $divs = $("#div2").nextAll(); //獲取所有兄弟元素 //ShowArraysID($divs); //-----舉例4.siblings()方法用于獲取所有同輩元素(前后都拿到) //$(".menuitem").siblings("li")。siblings、next等所有能傳遞選擇器的地方能夠使用的語法都和$()語法一樣。 //var $divs = $("#div2").siblings("div"); //獲取id為div2前后的所有div元素 //ShowArraysID($divs); var $divs = $("#div2").siblings(); //獲取id為div2前后的所有元素 ShowArraysID($divs); }); function ShowArraysID($jqueryArr) { var output = ""; for (var i = 0; i < $jqueryArr.length; i++) { if (output == "") { output = $jqueryArr.eq(i).attr("id"); } else { output += "," + $jqueryArr.eq(i).attr("id"); } } alert(output); } </script> </head> <body> <div id="div1">我是div1</div> <input id="Text3" type="text" value="我是text1" /> <div id="div2">我是div2</div> <input id="txt1" type="text" value="我是text1" /> <div id="div3">我是div3</div> <input id="Text1" type="text" value="我是text2" /> <div id="div4">我是div4</div> <input id="Text2" type="text" value="我是text3" /> <div id="div5">我是div5</div> </body> </html>
希望本文所述對大家的jQuery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- jQuery遍歷DOM元素與節(jié)點(diǎn)方法詳解
- jQuery實(shí)現(xiàn)動(dòng)態(tài)添加節(jié)點(diǎn)與遍歷節(jié)點(diǎn)功能示例
- jQuery DOM節(jié)點(diǎn)的遍歷方法小結(jié)
- jQuery遍歷節(jié)點(diǎn)方法匯總(推薦)
- jQuery遍歷節(jié)點(diǎn)樹方法分析
- jQuery遍歷DOM節(jié)點(diǎn)操作之filter()方法詳解
- jQuery循環(huán)遍歷子節(jié)點(diǎn)并獲取值的方法
- JQuery遍歷DOM節(jié)點(diǎn)的方法
- Jquery節(jié)點(diǎn)遍歷next與nextAll方法使用示例
- Jquery遍歷節(jié)點(diǎn)的方法小集
- jQuery遍歷節(jié)點(diǎn)元素方法介紹
相關(guān)文章
關(guān)于jquery input textare 事件綁定及用法學(xué)習(xí)
目前1.7以上,jquery的事件綁定已經(jīng)用on替換了原來的bind,接下來為大家介紹下bind的使用方法及input textare事件,感興趣的朋友可以參考下哈2013-04-04jquery層級選擇器(匹配父元素下的子元素實(shí)現(xiàn)代碼)
下面小編就為大家?guī)硪黄猨query層級選擇器(匹配父元素下的子元素實(shí)現(xiàn)代碼)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09jQuery圖片左右滾動(dòng)代碼 有左右按鈕實(shí)例
這篇文章主要介紹使用jQuery實(shí)現(xiàn)圖片左右滾動(dòng)的實(shí)例,需要的朋友可以參考下。2016-06-06jQuery插件FusionCharts繪制的2D雙面積圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts繪制的2D雙面積圖效果,結(jié)合實(shí)例形式分析了jQuery使用插件FusionCharts結(jié)合xml格式數(shù)據(jù)繪制2D雙面積圖的具體步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-04-04jquery html添加元素/刪除元素操作實(shí)例詳解
這篇文章主要介紹了jquery html添加元素/刪除元素操作,結(jié)合實(shí)例形式詳細(xì)分析了jquery html添加元素/刪除元素相關(guān)函數(shù)功能、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-05-05jQuery.uploadify文件上傳組件實(shí)例講解
這篇文章主要介紹了jQuery.uploadify文件上傳組件實(shí)例講解的相關(guān)資料,本文圖文并茂介紹的非常詳細(xì),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09