Use examples to illustrate the usage of filter() and find() and the difference analysis between children() and find()_jquery

Jquery’s find() method and filter() method are easy to confuse for beginners. Here we will compare and illustrate these two methods through a small example. Aim to understand the difference between these two methods.

html code

Copy code The code is as follows:

< ;div class="css">
 

Test 1

 

Test 2

First look at the find() method

Copy code The code is as follows:

$("div").find(".rain").css('color' , '#FF0000');
//Equivalent to: $("div .rain").css('color','#ff0000');
//Equivalent to: $(" .rain","div").css('color','#ff0000');

Display results:

Question: Why doesn’t “Test 2” turn red here?

find() method definition: It is to get the descendants of each element in the current element collection, filtered by selector, jQuery object or element.

Things to note about the find() method: The find() method searches within the current element collection. Not including myself.

In the above example, $("div") contains two elements. The first element meets the requirements. But although the class of the second element div itself is "rain", there is no class=rain inside it. So it doesn't fit.

Let’s use the filter() method to see what’s new

$("div").filter(".rain").css('color', '#FF0000');

Display results:

filter() method definition: The filter() method reduces the matching element set to the elements of the specified selector .

It means that for a set of matching elements, use a selector to test each element itself (not its descendants). Elements that match the selector are included in the set, and those that do not match are removed (the selector acts as a filter). Form a new result set.

In the above example: find() will look for elements with class rain inside the div element (descendants). Filter() filters elements whose class is rain in div. One is to operate on its subset, and the other is to filter the elements of its own collection.

Looking at two examples of the filter() method: Example 1 Example 2

The second form of using the filter() method is to filter elements through a function instead of a selector. For each element, if the function returns true, the element is included in the filtered collection; otherwise, the element is excluded.

Look at the example below:

Copy code The code is as follows:

------------ ---------------
Message from web page
------------------------- --
The code is in your clipboard now
--------------------------
OK
- --------------------------

Copy code The code is as follows:

$('li').filter(function(index) {
return $('strong', this).length == 1;
}).css('background-color', 'red');

The results are as follows:

By the way, here is the difference between the find() method and the children() method

The find() method has been mentioned above, so I won’t go into details here. Let’s talk about the children() method.

Children, the surface meaning is: children, children, children. I generally understand here as children or sons. Why do you understand it this way? Let’s first look at the definition of children

children() method definition: It is to obtain all child elements of for each element in the matching element set. (Excluding yourself, you can only search in the son generation (first level))

find() method definition: It is to obtain the descendants of each element in the current element collection, filtering by selector, jQuery object or element.

My understanding is that children are the child elements of the "sons" of each element in the matching set. In addition to the sons' generation, find() also includes the grandchildren's generation. That is, as long as it is its descendant.

Let’s take a look at an example:

Copy the code The code is as follows:

Hello
                                                                 

again

Hello Again

<script>$ ("div").children(".selected").css("color", "blue");</script>





The result is as shown below: