jquery怎麼遍歷節點
- coldplay.xixi原創
- 2020-11-16 13:44:284030瀏覽
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樹的結構中可以知道
- 元素的上一個同儕節點是
- 元素也互為同儕元素。
如果要取得
元素的同儕元素，可以使用以下程式碼：
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（視頻）
，因此可以透過prev()方法來取得
元素，程式碼如下：
var $ul=$( "ul").prev();//取得緊鄰
- 元素前的同儕元素
得到的結果將是：
<p title="選擇你最喜歡的水果.">你最喜歡的水果是？ </p>
4、siblings()方法
此方法用於取得配對元素前後所有的同儕元素。
上面的程式碼中就用到了siblings()方法，當時是為了取得符合元素的兄弟節點，也就是取得符合元素的同儕元素。
以DOM樹的結構為例。
- 元素與
元素互為同儕元素，
- 元素下的3個
以上是jquery怎麼遍歷節點的詳細內容。更多資訊請關注PHP中文網其他相關文章！