Detailed explanation of node operation methods such as each(), find() and filter() in jQuery (recommended)

1.each(callback)

Official explanation:

Return value: jQuery

Overview

Execute a function with each matching element as the context.

means that each time the function passed in is executed, the this keyword in the function points to a different DOM element (a different matching element each time). Moreover, every time the function is executed, a numeric value representing the position of the element as the execution environment in the matching element set is passed to the function as a parameter (an integer based on zero). Returning 'false' will stop the loop (just like using 'break' in a normal loop). Returns 'true' to jump to the next loop (just like using 'continue' in a normal loop).

Parameters

callback

Function to be executed for each matching element

Example

Description:

Iterate over two images and set their src attribute. Note: here this refers to the DOM object rather than the jQuery object.

HTML code:

jQuery code:

$("img").each(function(i){
this.src = "test" + i + ".jpg";
});

Result:

[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]

2.find(expr|obj|ele)

Official explanation:

Return value: jQuery

Overview

Search for all elements that match the specified expression. This function is a great way to find out the descendant elements of the element being processed.

All searches rely on jQuery expressions. This expression can be written using CSS1-3 selector syntax.

Parameters

expr String
Expression used to find
jQuery object object
A jQuery object used to match elements
element DOMElement
A DOM element

Example

Description:

Start from all paragraphs and further search for span elements below . Same as $("p span").

HTML code:

Hello, how are you?

jQuery code:

$("p").find("span")

Result:

[ Hello ]

3.filter(expr|obj|ele|fn)

Official explanation:

Overview

Filter out matches that match the specified expression collection of elements.

This method is used to narrow the matching scope. Separate multiple expressions with commas

Parameters

expr String
String value, containing selector expressions for matching the current set of elements.
jQuery object object
Existing jQuery object to match the current element.
element Expression
A DOM element used to match elements.
function(index) Function
A function is used as a collection of test elements. It accepts a parameter index, which is the index of the element in the jQuery collection. In functions, this refers to the current DOM element.

Example

Parameter selector description:

Retain elements with select class

HTML code :

<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>

$("p").filter(".selected")

And Again