Jquery's find () method and filter () method are easy to confuse for beginners. Here we use a small example to compare and describe these two methods. It aims to understand the differences between the two methods.
Html code
Let's take a look at the find () method.
Copy codeThe Code is as follows: $ ("div"). find (". rain" ).css ('color', '# FF0000 ');
// Equivalent to: $ ("div. rain" ).css ('color', '# ff0000 ');
// It is also equivalent to: $ (". rain", "div" ).css ('color', '# ff0000 ');
Display result:
Q: Why does "Test 2" not change to red?
Find () method definition: it is used to obtain the descendant of each element in the current Element Set and filter by selector, jQuery object, or element.
Note the find () method: The find () method is used to search within the current element set. Do not include yourself.
In the preceding example, $ ("div") contains two elements. The first element meets the requirements. However, although the class of the second element div itself is "rain", there is no class = rain in it. So it does not match.
Next we will use the filter () method to see what's new.
$("div").filter(".rain").css('color', '#FF0000');
Display result:
Filter () method definition: The filter () method reduces the set of matching elements to the elements of the specified selector.
This indicates a set of matching elements. Each element is tested with a selector (not a descendant). The elements that match the selector are included in the set, and the non-conforming elements are removed (the selector is used for filtering ). Form a new result set.
In the preceding example, find () searches for elements whose class is rain in the div element (descendant. Filter () is the element that filters div class as rain.One is to operate on its subset, and the other is to filter its own set elements.
Let's look at two examples of the filter () method: Example 1 Example 2
The second form of the filter () method is to filter elements through functions rather than selectors. If this function returns true for each element, the element is included in the filtered set. Otherwise, this element is excluded.
Let's take a look at the following example:
Copy codeThe Code is as follows :---------------------------Copy codeThe Code is as follows: $ ('lil'). filter (function (index ){
Return $ ('strong ', this). length = 1;
Background .css ('background-color', 'red ');
The result is as follows:
By the way, the difference between the find () method and the children () method
The find () method has been mentioned above. I will not discuss it here. Let's talk about the children () method below.
Children indicates children, children, and children. I generally think of it as a child or son. Why? Let's take a look at the definition of children.
Definition of the children () method: it is used to obtain each element in the matched element set.All child elements. (Not including yourself. You can only search for your son (the first layer)
Find () method definition: it obtains each element of the current element set.Descendant, Which can be filtered by selector, jQuery object, or element.
In my understanding, children is a child element that matches each element in the set. In addition to sons, find () also includes grandchildren. That is, as long as it is its descendant.
Here is an example:
The result is shown in:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
