首頁  >  文章  >  web前端  >  jQuery子代選擇器parent > child用法詳解

jQuery子代選擇器parent > child用法詳解

巴扎黑
巴扎黑原創
2017-06-21 10:47:523720瀏覽

jQuery的parent > child選擇器(子代選擇器)用於匹配parent元素的所有子輩child元素,將其封裝為jQuery物件並傳回。

注意:選擇器child的尋找範圍必須是"parent元素"的子輩元素,不包含"孫子輩"及更後輩的元素。

如果你想在所有的後代元素中查找,請使用後代選擇器(ancestor descendant)。

語法

// 这里的parent表示具体的父辈选择器
// 这里的child表示具体的子辈选择器
jQuery( "parent > child" )

>號碼兩側的空格可以省略,但不建議省略,否則字元過於緊密可能影響閱讀。

參數

參數                    說明

parent           一個有效的父親中選擇者上。

child             一個有效的子輩選擇器,只用於匹配父輩選擇器的子元素

返回值

#返回封裝了在父輩元素內查找到的符合條件的子元素的jQuery物件。

如果找不到與父輩選擇器相符的DOM元素,或是在符合父輩選擇器的DOM元素內找不到符合子代選擇器的子元素,則傳回一個空的jQuery物件。

符合父輩選擇器的父輩DOM元素可能有多個,在一個父輩DOM元素內也可能查找到多個子DOM元素,回傳的jQuery物件中封裝了符合條件的所有DOM元素。

範例&說明

以下面這段HTML程式碼為例:

<div id="n1">
    <p id="n2" class="test">
        <span id="n3" class="a">Hello</span>
    </p>
    <p id="n4" class="detail">
        <span id="n5" class="b codeplayer">World
            <span id="n6" class="c">365mini.com</span>
        </span>
    </p>
</div>

現在,我們想要一次查找到p標籤內所有的span子元素,則可以寫如下jQuery程式碼:

// 选择了id分别为n3、n5的两个元素
// n6不是p标签的子元素,而是孙子辈的元素,因此无法匹配
$("p > span");

接著,我們尋找span標籤的span子元素,則可以寫如下jQuery程式碼:

// 选择了id为n6的一个元素
$("span > span");

我們可以配合使用所有元素選擇器(*)來實作只找孫子輩元素的選擇器。例如:我們想要找id為n1的元素的孫子輩的span標籤,對應的jQuery程式碼如下:

// 选择了id分别为n3、n5的两个元素
$("#n1 > * > span");

以上是jQuery子代選擇器parent > child用法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn