The jquery-based has () method and its differences with the find () method and filter () method

Has (selector or DOM element) matches the Element Set Based on the selector or DOM element as the condition to retrieve whether the condition exists in the descendant of each element, create a new result set with the matching elements.

The following is an example:
Copy codeThe Code is as follows:
<Ul>
<Li> list item 1 </li>
<Li> list item 2
<Ul>
<Li> <div> <span> a </span> </div> list item 2-a </li>
<Li> list item 2-b </li>
</Ul>
</Li>
<Li> list item 3 </li>
<Li> list item 4 </li>
</Ul>

Copy codeThe Code is as follows:
Certificate ('li'background .has('span'background .css ('background-color', 'red ');

The result is as follows:

In this example, we can see that, when matching li, we need to check whether the child element of the li contains span. If it contains, the element is included in the result. If it is not included, it is excluded.

Note: has only plays a judgment role. Use the selector or DOM element in the has parameter as the condition to check whether the elements in the original result set match. Remove the non-conforming elements to form a new result set.

This is different from the find () method. The find () method is used to obtain the descendant of each element in the current result set. Parameters (selector, jquery set, or DOM element) are used as filter conditions. If the filter conditions are met, they are retained and the descendant is retained. In the has () method, a parameter is only used as a condition. If the condition is met, its pre-element is added to a new result set, rather than the new result set to be added to the descendant.

$('li').find('span').css('background-color', 'red');

Result:

Parameters in the filter () and has () methods are filter conditions. The difference is the filter () method, where the condition acts on itself; the has () method condition acts on its descendant element.

Take the following example: in the filter () method, Conditions Act on itself.LiThe has () method must act onDescendant element of li
Copy codeThe Code is as follows:
<Ul>
<Li class = "a"> list item 1 </li>
<Li> list item 2
<Ul>
<Li> <div> <span> a </span> </div> list item 2-a </li>
<Li> list item 2-b </li>
</Ul>
</Li>
<Li> list item 3 </li>
<Li> list item 4 </li>
</Ul>

Copy codeThe Code is as follows:
Certificate ('li'0000.filter('.a'0000.css ('background-color', 'red ');

Result: