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

AI Hentai Generator

Generate AI Hentai for free.

Show More

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Repo: How To Revive Teammates

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

3 weeks ago By DDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

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?

7318

9

Java Tutorial

1625

14

CakePHP Tutorial

1349

46

Laravel Tutorial

1261

25

PHP Tutorial

1209

29

Show More