Jquery學習筆記:利用find和children方法獲取后代元素


在很多場景下,需要根據一個已知的jquery對象,去查找其滿足條件的后代節點。

這時可以利用 find函數和children來處理。

find和children函數都可有一個參數,常見的是一個字符串,其值就是選擇器,含義同利用 $()函數來獲取元素。

兩者的區別是children函數只獲取其滿足條件的第一層子節點,而find函數則獲取所有下級子節點。

下面我們舉例說明:

<div id="mydiv">
    <p id="pid"></p>
    <span class="aspan">hello</span>
    <div>
        <a id="aid"></a>
        <span class="aspan">test</span>
    </div>
</div>

js代碼如下:
var obj = $("#mydiv");
//獲取到obj元素下的 div標簽下的樣式為aspan下的元素
var child = obj.find("div .aspan");
alert(child.html());

children方法
obj.children() 獲取obj的第一層所有子節點
obj.children("span") 獲取obj的第一層所有標簽為span子節點
obj.children("a") 返回為空,因為a標簽不是obj的直接子節點,這時應該用find方法

 通過children方法獲得是一個jquery對象,利用 get(index)和 [index]取得的是dom對象,可以利用 first方法獲取其中包含的第一個dom對象對應的jquery對象。

可以看出,使用這兩個函數,核心就是其輸入參數,即編寫相應的選擇器.

注意,利用find方法,如果條件不存在沒有匹配的元素,則返回的並非是null或undefined,可以通過 length屬性為0是否匹配到。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM