溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

jquery如何遍歷節(jié)點(diǎn)

發(fā)布時(shí)間：2020-11-17 10:02:55 來(lái)源：億速云 閱讀：282 作者：小新 欄目：web開(kāi)發(fā)

這篇文章給大家分享的是有關(guān)jquery如何遍歷節(jié)點(diǎn)的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。

jquery遍歷節(jié)點(diǎn)的方法：1、使用【children()】方法匹配元素的子元素集合；2、使用【next()】方法匹配元素后面緊鄰的同輩元素；3、使用【prev()】方法匹配元素前面緊鄰的同輩元素。

jquery遍歷節(jié)點(diǎn)的方法：

1、children()方法

該方法用于取得匹配元素的子元素集合。

使用children()方法來(lái)獲取匹配元素的所有子元素的個(gè)數(shù)。

var $body=$("body").children();
var $p=$("p").children();
var $ul=$("ul").children();
alert("$body.length");                //<body>元素下有2個(gè)子元素
alert($p.length);                        //<p>元素下有0個(gè)子元素
alert("$ul.length");                    //<ul>元素下有3個(gè)子元素
for(var i=0;len=$ul.length;i<len;i++)<br>{
    alert($ul[i].innerHTML);    //循環(huán)輸出<li>元素的HTML內(nèi)容
}

2、next()方法

該方法用于取得匹配元素后面緊鄰的同輩元素。

var $p1=$("p").next;//獲取緊鄰<p>元素后的同輩元素

得到的結(jié)果將是：

<ul> 
       <li title='蘋(píng)果'>蘋(píng)果</li> 
       <li title='橘子'>橘子</li> 
       <li title='菠蘿'>菠蘿</li> 
</ul>

3、prev()方法

該方法用于取得匹配元素前面緊鄰的同輩元素

從dom樹(shù)的結(jié)構(gòu)中可以知道<ul>元素的上一個(gè)同輩節(jié)點(diǎn)是<p>，因此可以通過(guò)prev()方法來(lái)獲取<p>元素，代碼如下：

var $ul=$("ul").prev();//取得緊鄰<ul>元素前的同輩元素

得到的結(jié)果將是：

<p title="選擇你最喜歡的水果.">你最喜歡的水果是？</p>

4、siblings()方法

該方法用于取得匹配元素前后所有的同輩元素。

jquery如何遍歷節(jié)點(diǎn)

上面的代碼中就用到了siblings()方法，當(dāng)時(shí)是為了獲取匹配元素的兄弟節(jié)點(diǎn)，即獲取匹配元素的同輩元素。

以DOM樹(shù)的結(jié)構(gòu)為例。<ul>元素和<p>元素互為同輩元素，<ul>元素下的3個(gè)<li>元素也互為同輩元素。

如果要獲取<p>元素的同輩元素，則可以使用如下代碼：

var $p2=$("p").siblings();//取得緊鄰<p>元素的同輩元素

得到的結(jié)果是：

<ul> 
       <li title='蘋(píng)果'>蘋(píng)果</li> 
       <li title='橘子'>橘子</li> 
       <li title='菠蘿'>菠蘿</li> 
</ul>

5、closest()

它用來(lái)取得最近的匹配元素。首先檢查當(dāng)前元素是否匹配，如果匹配則直接返回元素本身。如果不匹配則向上查找父元素，逐級(jí)向上直到找到匹配選擇器的元素。如果什么都沒(méi)找到則返回一個(gè)空的Jquery對(duì)象。

比如，給點(diǎn)擊的目標(biāo)元素的最近的li元素添加顏色，可以使用如下代碼：

$(document).bind("click",function(e){ 
  $(e.target).closest("li").css("color","red"); 
})

感謝各位的閱讀！關(guān)于jquery如何遍歷節(jié)點(diǎn)就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手