Differences between children () and find () in jquery _ jquery

This article introduces the differences between children () and find () in jquery. For more information, see. children (selector ). All child elements( Son generation only). Optional. Add parameters to filter elements by selector.

The. find (selector) method returnsDescendant.Parameters are requiredThe selector and jquery object can be used to filter elements.

The. find () method is similar to. children () method. The difference is that the latter only traverses a single level down the DOM tree. Children here, I understand as a son, only traverse at the son level.Let's take a look at the example:

The Code is as follows:

The. children (selector) method returns all child elements (only child) matching each element in the element set ). Optional. Add parameters to filter elements by selector.

The. find (selector) method returns the descendant of each element in the matched element set. Parameters are required. elements can be filtered for selector and jquery objects.

The. find () method is similar to. children () method. The difference is that the latter only traverses a single level down the DOM tree. Children here, I understand as a son, only traverse at the son level. Let's take a look at the example:

The Code is as follows:

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

The result of this line of code is that project A, B, and C get A red background. Because no selector expression is applied, the returned jQuery object contains all child elements. If a selector is applied, only the matching items are included.

Let's look at the example:

The Code is as follows:

Script
$ (Document). ready (function (){
$ ("# Abc"). children (". selected" ).css ("color", "blue ");
});
Script

Hello

Hello Again

<-- Change

And Again

AaAnd Again

<-- Change

And One Last Time

The result is as follows:

This is the expected result, but if

Change

, See the code comment above. The result is:

Knowledge points for attention in the. find () method:

1. find is the descendant of each element in the current element set. As long as the match is met, either the son or the son can.

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

3. find only traverses the child, excluding itself.

4. the selector context is composed. the find () method is implemented. Therefore, $ ('Li. item-II '). find ('lil') is equivalent to $ ('lil', 'Li. item-II ').

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

Generally, jquery's selector is used as the first parameter. In fact, this usage of the jquery () function can also pass the second parameter. The purpose of passing this parameter is to restrict the previous selector to the context environment. By default, the second parameter is not input. The selector searches the DOM from the root of the document ($ () to find the DOM element 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.

The following is an example.

The Code is as follows:

$ ("P. foo"). click (function (){
$ ("Span", this). addClass ("bar ");
});

Since we have limited the span selector to this environment, only the span in the clicked element will get the additional class.
Internally, Selector contextIs implemented through the. find () method, so $ ("span", this) is equivalent to $ (this). find ("span "), $ ('Li. item-II'). find ('lil') is equivalent to $ ('lil', 'Li. item-II ')

For more information, visit: http://www.w3school.com.cn/jquery/traversing_find.asp

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