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

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中文網其他相關文章！