What is the purpose of the .each() function in jQuery? Explain with an example.

Question

Aryan Kumar · Answer

The jQuery .each() function is used to iterate over a jQuery object, executing a function for each matched element. The function is passed two arguments: the current element and its index.

Here is an example of how to use the .each() function to change the color of all the even-numbered li elements in a list:

Code snippet

$("li").each(function(index) {
  if (index % 2 === 0) {
    $(this).css("color", "red");
  }
});

This code will iterate over all the li elements in the document and call the function for each one. The function will check the index of the current element. If the index is even, the function will change the color of the element to red.

The .each() function is a powerful tool that can be used to perform a variety of tasks on a jQuery object. It is a versatile function that can be used in a variety of situations.

Here are some other examples of how to use the .each() function:

To add a class to all the even-numbered li elements in a list:

Code snippet

$("li").each(function(index) {
  if (index % 2 === 0) {
    $(this).addClass("even");
  }
});

To hide all the li elements that contain the word "hidden" in their text:

Code snippet

$("li").each(function() {
  if ($(this).text().indexOf("hidden") !== -1) {
    $(this).hide();
  }
});

To loop through an array of numbers and print each number to the console:

Code snippet

var numbers = [1, 2, 3, 4, 5];

numbers.each(function(index, number) {
  console.log(number);
});

The .each() function is a powerful tool that can be used to perform a variety of tasks on a jQuery object, an array, or an object. It is a versatile function that can be used in a variety of situations.

forum

What is the purpose of the .each() function in jQuery? Explain with an example.

Can you answer this question?

1 Answers