jQuery's descendant selector ancestor descendant introduction and example analysis

jQuery's ancestor descendant selector (descendant selector) is used to match all descendant elements within the ancestor element and encapsulate them as jQuery Object and return.

Note: The search scope of the selector descendant is the descendant elements of the "ancestor element", whether it is the descendant element of the "ancestor element", the "grandchild", or the more "descendant" elements.

If you only want to find descendant elements, please use the descendant selector (parent > child).

Syntax

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

Parameters

Parameters                                                                                                                                                                    .

descendant A valid descendant selector.

Return value

Returns a jQuery object that encapsulates the DOM element that matches the descendant selector found within the DOM element that matches the ancestor selector.

If no DOM element matching the ancestor selector is found, or no DOM element matching the descendant selector is found within the DOM element matching the ancestor selector, an empty jQuery object is returned.

There may be multiple ancestor DOM elements that match the ancestor selector, and multiple descendant DOM elements may be found within one ancestor DOM element. The returned jQuery object encapsulates all DOM elements that meet the conditions.

Example & Description

Take the following HTML code as an example:

<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>

Now, we want to find all p tags in the tag with id n1 at one time , you can write the following jQuery code:

// 选择了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");

The above is the detailed content of jQuery's descendant selector ancestor descendant introduction and example analysis. For more information, please follow other related articles on the PHP Chinese website!