Working with the each method in jQuery

When we have a group of elements retrieved using jQuery, we can only make changes to all elements at once.

For example, if we want to change the text of all found paragraphs, we won’t be able to make it different.

In this case, a special method will help us each, which allows us to apply a function to all elements of the jQuery set. At the same time, inside this function we can separate the elements and act differently with each of them.

Essentially, each is a loop that can be used to iterate over all found elements. The reference to the element that is currently being looped over will be in this.

We can simply use this this in pure JavaScript, as we did before, for example, like this - this.innerHTML - and output the inner content of our elements. But it's better to wrap this in a jQuery dollar like this - $(this) - in which case we can apply all jQuery methods and chains to it.

Let's look at the following HTML code:

<p class="www">text</p>
<p class="www">text</p>
<p class="www">text</p>
<p>text</p>

In this example, we need to get all elements with the class www and print their content. Here's how it's done: with $('.www') we get the elements we need, then with each(test) we apply the test function to each element we get. It will first be applied to the first paragraph, then to the second, to the third, and so on.

Inside the function, this will point to the element to which the test function is applied - first it will be the first element, then the second, and so on. Using this construction $(this), instead of the usual this from JavaScript, we will get the jQuery element and apply the html method to it, which will get the text of our element. Well, and then it will simply be displayed on the screen:

/*
	We write the name of the test function without quotes and (), since we need its code, not the result:
*/

$('.www').each(test);

function test() {
	alert($(this).html());
}

To solve this problem, you can also use anonymous functions - this is what is done most often:

$('.www').each(function() {
	alert($(this).html());
});

We can also pass a callback function with parameters to the each method.

In the following example, let's add a sequence number to the end of all li on the page. Now we will pass the element number and the element itself to our anonymous function:

$('li').each(function (index, elem) {
	$(elem).append(index);
});

Now instead of elem we use this:

$('li').each(function (index) {
	$(this).append(index);
});

Replace the contents of all li with their ordinal number.