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:

79d7c95122630a3791db16c5259dc98d79d7c95122630a3791db16c5259dc98d

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:

e388a4556c0f65e1904146cc1a846bee45a2772a6b6107b401db3c9b82c049c2Hello54bdf357c58b8a65c66d7c19c8e4d114, how are you?94b3e26ee717c64999d7867364b1b4a3

jQuery code:

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

Result:

[ 45a2772a6b6107b401db3c9b82c049c2Hello54bdf357c58b8a65c66d7c19c8e4d114 ]

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>

##jQuery Code:

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

Result:

[ 27ec8ff0d0eb2aeaabbd785252528076And Again94b3e26ee717c64999d7867364b1b4a3 ]

The above is the each(), find() and filter() in jQuery introduced by the editor. I am waiting for the detailed explanation (recommendation) of the node operation method. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank you all for your support of the PHP Chinese website!

For more detailed explanations (recommended) of node operation methods such as each(), find() and filter() in jQuery (recommended), please pay attention to the PHP Chinese website!