Home > Web Front-end > JS Tutorial > Detailed explanation of jQuery child selector parent > child usage

Detailed explanation of jQuery child selector parent > child usage

巴扎黑
Release: 2017-06-21 10:47:52
Original
3741 people have browsed it

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" )
Copy after login

> 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>
Copy after login

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");
Copy after login

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

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

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");
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template