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