jQuery的後代選擇器ancestor descendant介紹和範例解析

jQuery的ancestor descendant選擇器(後代選擇器)用於匹配ancestor元素內所有的descendant元素，將其封裝為jQuery 物件並傳回。

注意：選擇器descendant的查找範圍是"ancestor元素"的後代元素，不管是"ancestor元素"的子輩元素，還是"孫子輩"，以及更"後輩"的元素均可。

如果你只想找出子輩元素，請使用子代選擇器(parent > child)。

語法

// 这里的ancestor表示具体的祖先选择器
// 这里的descendant表示具体的后代选择器
jQuery( "ancestor descendant" )

參數

參數                            說明

ancestor    

descendant      一個有效的後代選擇者。

傳回值

傳回封裝了在符合祖先選擇器的DOM元素內查找到的符合後人選擇器的DOM元素的jQuery物件。

如果找不到與祖先選擇器相符的DOM元素，或是在符合祖先選擇器的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>

現在，我們想要一次查找到id為n1的標籤內的所有p標籤，則可以編寫如下jQuery程式碼：

// 选择了id分别为n2、n4的2个元素
$("#n1 p");
如果要一次性查找到p标签内的所有span标签，则对应的jQuery代码如下(上述示例HTML中所有的span标签都包括在内)：
// 选择了id分别为n3、n5、n6的3个元素
$("p span");
当然，祖先选择器和后代选择器可以是任意有效的选择器，因此它们本身也可以是一个"祖先-后代"选择器。
// 选择了id为n6的一个元素
$("#n1 p.detail span.c");

以上是jQuery的後代選擇器ancestor descendant介紹和範例解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！