Introduction based on the difference between children() and find() in jquery_jquery

The

.children(selector) method returns all children (only children ) of each element in the set of matching elements. Parameters are optional. Adding parameters means filtering through the selector and filtering elements.

The

.find(selector) method returns the descendants of each element in the matching element set. The parameter is required and can be a selector, jquery object or element to filter elements.

.find() is similar to the .children() method, except that it only traverses a single level down the DOM tree. Children here, I understand as sons, are only traversed at the son level. Look at the example:

Copy the code The code is as follows:

.children The (selector) method returns all children (only children) of each element in the set of matching elements. Parameters are optional. Adding parameters means filtering through the selector and filtering elements. The

.find(selector) method returns the descendants of each element in the set of matching elements. Parameters are required and can be selectors, jquery objects or elements to filter elements.

.find() is similar to the .children() method, except that it only traverses a single level down the DOM tree. Children here, I understand as sons, are only traversed at the son level. Take a look at the example:

Copy the code The code is as follows:

$( 'ul.level-2').children().css('background-color', 'red');

The result of this line of code is that items A, B, C get red background. Since we didn't apply a selector expression, the jQuery object returned contains all child elements. If a selector is applied, only matching items will be included.

Looking at an example:

Copy code The code is as follows:

<script> <br> $(document).ready(function(){ <br> $("#abc").children(".selected").css("color", "blue"); <br> }); <br> </script>

Hello
p>
                                                                    ;aaAnd Again
🎜>

The results obtained are as follows:

This is the expected result, but if you replace the above

with

, see the code comments above, the result is:

Things to note about the .find() method:

1. Find is to traverse the descendants of each element in the current element collection. As long as they meet the requirements, it doesn't matter whether they are sons or grandsons.

2. Unlike other tree traversal methods, selector expressions are required parameters for .find(). If we need to retrieve all descendant elements, we can pass the wildcard selector '*'.

3. find only traverses the descendants, excluding itself.

4. The selector context is implemented by the .find() method; therefore, $('li.item-ii').find('li') is equivalent to $('li', 'li.item -ii').

The syntax of the selector is: jQuery(selector, [context])

Generally, jquery selectors are used as the first parameter. In fact, this usage of the jquery() function can also pass a second parameter. The purpose of passing this parameter is to limit the previous selector to the context environment. By default, that is, if the second parameter is not passed, the selector searches the DOM from the root of the document ($() will search for DOM elements in the current HTML document); if the second parameter is specified, such as a DOM element Set or jquery object, it will be searched in this context.

Look at an example below

Copy the code The code is as follows:

$( "div.foo").click(function() {
$("span", this).addClass("bar");
});

Since we have Limit the span selector to this environment, and only the span in the clicked element will get the additional class.
Internally, the selector context is implemented through the .find() method, so $("span", this) is equivalent to $(this).find("span"),$('li.item-ii').find('li') is equivalent to $('li', 'li.item-ii')

For more information about find(), please visit: http://www.w3school.com.cn/jquery/traversing_find.asp

children() For more information, please visit: http://www.w3school.com.cn/jquery/traversing_children.asp

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

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Show More

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

3 weeks ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

2 weeks ago By DDD

Where to find the Crane Control Keycard in Atomfall

3 weeks ago By DDD

Assassin's Creed Shadows - How To Find The Blacksmith And Unlock Weapon And Armour Customisation

1 months ago By DDD

Roblox: Dead Rails - How To Complete Every Challenge

3 weeks ago By DDD

Show More

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Show More

Hot Topics

Where is the login entrance for gmail email?

7626

15

CakePHP Tutorial

1389

52

What is the format of the account name of steam

89

11

win11 activation key permanent

70

19

nyt connections hints and answers

31

139

Show More