本文實例講述了JQuery中節點遍歷方法。分享給大家供大家參考。具體如下：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 <!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節點遍歷</title> <script src="jquery-1.6.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { //-----舉例1.獲取節點之前的挨著的第一個兄弟元素 //var $divs = $("#div2").prev("div"); //只獲取div //ShowArraysID($divs); //-----舉例2.獲取節點之前的所有兄弟元素 //var $divs = $("#div2").prevAll("div"); //只獲取div //var $divs = $("#div2").prevAll(); //獲取所有兄弟元素 //ShowArraysID($divs); //-----舉例3.獲取節點之後的挨著的第一個兄弟元素 //var $divs = $("#div2").next("div"); //只獲取div div2後緊挨著的是input所以返回零個元素 //ShowArraysID($divs); //-----舉例4.獲取節點之後的所有兄弟元素 類似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程序設計有所幫助。