Detailed explanation of jQuery child selector parent > child usage

jQuery's parent > child selector (child selector) is used to match all child elements of the parent element, encapsulate them into jQuery objects and return them.

Note: The search scope of the selector child must be the descendant elements of the "parent element", excluding "grandchildren" and later elements.

If you want to search among all descendant elements, please use descendant selector(ancestor descendant).

Grammar

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

> The spaces on both sides of the symbol can be omitted, but it is not recommended to omit it, otherwise the characters may be too close together to affect reading.

Parameters

Parameters                                                                                                                                                                                                                                                                                     .

child                                                                                                                                                                                                                                             # The jQuery object of the condition's child element.

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

There may be multiple parent DOM elements that match the parent selector, and multiple child DOM elements may be found within one parent 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 the span sub-elements in the p tag at one time, then You can write the following jQuery code:

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

Next, if we find the span sub-element of the span tag, you can write the following jQuery code:

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

We can use all

element selectors

(*) to implement a selector that only looks for descendant elements. For example: We want to find the span tags of the grandchildren of the element with id n1. The corresponding jQuery code is as follows:

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

The above is the detailed content of Detailed explanation of jQuery child selector parent > child usage. For more information, please follow other related articles on the PHP Chinese website!