What does iteration in jquery mean

jquery's iteration represents traversal, which is divided into explicit iteration and implicit iteration. The difference is: explicit iteration, the ".each()" method is a typical explicit iteration, jQuery method can only be used one by one, By operating the current element sequentially and implicitly iterating, the jQuery method can perform a certain operation on all elements in the object (that meet the conditions) at once, regardless of which element it is currently, and complete it all at once.

Operating system for this tutorial: Windows 10 system, jQuery3.6.0 version, Dell G3 computer.

jquery's iteration represents traversal, which is divided into explicit iteration and implicit iteration:

Explicit iteration means that a certain jQuery method can only be used one by one, in sequence Operate on the element currently in its turn.

Implicit iteration means that a certain jQuery method can perform a certain operation on all the elements in the object (that meet the conditions) at once, and all the elements in the object can be unknowingly All elements are done. You don't know which element is currently being operated on, because you can do it all at once.
Example of iteration:

<ul>
<li>foo</li>
<li>bar</li>
</ul>
$( “li” ).addClass( “bar” );

This is implicit iteration. You don’t need to care about which element it is currently, because all li elements are added with the class bar at once. .
Still this function, if I want to write it using explicit iteration, how should I write it?

$( “li” ).each(function() {
$( this ).addClass( “foo” );
});

Adding classes to li one by one can achieve the function, but obviously it is more verbose and is not recommended.
Below I will give another example that can only be written using explicit iteration: (the code in the HTML part is the same as above)

$( “li” ).each(function( index ) {
console.log( index + “: ” + $( this ).text() );
});

.each() method is a typical explicit iteration: First, I used the selector to select all li elements to form an object, so the object looks like this (similar to json format): [ { 0: li }, { 1: li } ] Each object also has its own A lot of properties...

Back to the .each() method. When the first li element is traversed, the first information is printed; when the second li is traversed, the second information is printed.

Look back at the code just now:

$( “li” ).each(function( index ) {
console.log( index + “: ” + $( this ).text() );
});

index is a formal parameter, indicating the subscript of the element that is currently in turn. Since it is a formal parameter, index is not needed, i can be used.
Then the question arises: why does this parameter represent the subscript when writing a parameter in this function? The answer is: .each() function of the method, which has 2 parameters. The

.each method is written like this: The first parameter of

$(selector).each(function( index , element ){
//do something
})

function is the subscript of the integer, and the second parameter is used to: return the currently read That element, such as the code just now, element returns each li. So it’s still the same code as before, we can also write it like this:

$( “li” ).each(function( i,element ) {
console.log($(element));
console.log( i + “: ” + $(element).text() );
});

Sometimes we don’t write element, just because using this keyword can replace element. this is equal to element. Likewise, $(this) and $(element) are the same. After using the $() selector to select this or element elements, we can use the API provided by jQuery to operate them very conveniently. For example, use the text() method to read the text content of the element, or use the css() method to modify the style. etc.

The above is the detailed content of What does iteration in jquery mean. For more information, please follow other related articles on the PHP Chinese website!