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：

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

Previous article：The jQuery syntax highlighting plug-in supports various program source code syntax coloring and highlighting_jqueryNext article：The jQuery syntax highlighting plug-in supports various program source code syntax coloring and highlighting_jquery

Related articles

See more

• An in-depth analysis of the Bootstrap list group component
• Detailed explanation of JavaScript function currying
• Complete example of JS password generation and strength detection (with demo source code download)
• Angularjs integrates WeChat UI (weui)
• How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills