jquery遍歷節點的方法:1、使用【children()】方法匹配元素的子元素集合;2、使用【next()】方法匹配元素後面緊鄰的同輩元素;3、使用【prev ()】方法匹配元素前面緊鄰的同儕元素。
本教學操作環境:windows10系統、jquery2.2.4,本文適用於所有品牌的電腦。
推薦:《jquery影片教學》
jquery遍歷節點的方法:
1、children( )方法
此方法用於取得符合元素的子元素集合。
使用children()方法來取得符合元素的所有子元素的數量。
var $body=$("body").children(); var $p=$("p").children(); var $ul=$("ul").children(); alert("$body.length"); //<body>元素下有2个子元素 alert($p.length); //<p>元素下有0个子元素 alert("$ul.length"); //<ul>元素下有3个子元素 for(var i=0;len=$ul.length;i<len;i++)<br>{ alert($ul[i].innerHTML); //循环输出<li>元素的HTML内容 }
2、next()方法
此方法用於取得符合元素後面緊鄰的同儕元素。
var $p1=$("p").next;
//取得緊鄰
元素後的同儕元素
所得到的結果將是:
<ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul>
3、prev()方法
此方法用於取得符合元素前面緊鄰的同儕元素
從dom樹的結構中可以知道
,因此可以透過prev()方法來取得
元素,程式碼如下:
var $ul=$( "ul").prev();
//取得緊鄰
得到的結果將是:
<p title="選擇你最喜歡的水果.">你最喜歡的水果是? </p>
4、siblings()方法
此方法用於取得配對元素前後所有的同儕元素。
上面的程式碼中就用到了siblings()方法,當時是為了取得符合元素的兄弟節點,也就是取得符合元素的同儕元素。
以DOM樹的結構為例。
元素互為同儕元素,
如果要取得
元素的同儕元素,可以使用以下程式碼:
var $p2=$("p").siblings();
//取得緊鄰
元素的同儕元素
得到的結果是:
<ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul>
5、closest()
#它用來取得最近的匹配元素。首先檢查當前元素是否匹配,如果匹配則直接返回元素本身。如果不符合則向上尋找父元素,逐級向上直到找到符合選擇器的元素。如果什麼都沒找到則回傳一個空的Jquery物件。
例如,給點擊的目標元素的最近的li元素添加顏色,可以使用如下代碼:
$(document).bind("click",function(e){ $(e.target).closest("li").css("color","red"); })
相關免費學習推薦:JavaScript(視頻)
以上是jquery怎麼遍歷節點的詳細內容。更多資訊請關注PHP中文網其他相關文章!