jQuery each() method

jQuery each() method: jQuery contains many processes that make coding a much better and faster work for professionals.  The each() method is one of the earliest method of jQuery. It makes DOM looping easier. Apart from simplification, we can also reduce the number of errors in DOM looping constructs with the jQuery each() method.

Every time, the callback function is passed through the current loop option. It starts at zero (0). Moreover, the callback function is deleted in the current DOM loop. We can use the "this” keyword for any element.  If we want to stop any loop speedily, we have to return the call back function's false option.

What does jQuery each method include?

There are 2 parameters in jQuery for each method. They are as follows:

1.  An object or an array is the first parameter for applying jQuery to each method.

2. The callback is the second parameter. It is a function that we can apply to all the elements of an object or an array. Now, the callback function has further other 2 parameters:

  • position- It is first parameter of the callback function. It is the index of all the present or current elements on which we have to apply this function.
  • value- It is the second parameter that denotes the value of a given position.

If we use jQuery each() method for an array, we will get the number of callback function denoting the index and the corresponding value as an argument. Contrary to that, if we use jQuery for any object, we will get the pair of key values as an argument. 

In each() method of jQuery, the plain object is iterated through the name properties, whereas an array is iterated through the indices. If the jQuery library does not wrap any of the DOM properties, we can use each() method to change or view these properties.

What is the usefulness of jQuery for each() method?

This method helps us to run all the elements of the jQuery target object. This object can contain several elements and make visible all the functions of jQuery. Apart from that, we can use each () method of jQuery manipulating DOM. Moreover, this method helps to iterate over objects and arrays.

How is jQuery each () method different from normal or traditional loop methods?

There are many loops methods, but each() method is one of the most convenient methods for coding. There are many benefits of using jQuery each() method. These methods are given below.

1. jQuery each() method is shorter than traditional loop methods.

2. It does not need several variables or additional functions to use this method.

3. It makes the object or an array easy to read for everyone.

4. It is easier than normal loop methods.

5. It saves time and solves complexity which professionals may face during any coding process.

6. It makes the work more precise and clear.

Syntax to use each() method

The syntax is given below.

$(selector).each(function(index,element))

Let’s understand the above syntax.

  • $(selector).each (function)

We can use the function method for all the matched elements. The function is the important parameter in jQuery each () method. There are 2 parameters in the function method: They are:

  • element

Element is the element that we choose.

  • index

Index means the integer value. This value is the index of the element that we select.

Consider the following example of each() method.

Example:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("li").each(function(){
      alert($(this).text())
    });
  });
});
</script>
</head>
<body>
<button> list item</button>
<ul>
  <li>Cold Drink</li>
  <li>Juice</li>
  <li>Soda</li>
</ul>
</body>
</html>

Output:

jQuery each() method

Conclusion

jQuery each() method is used by many individuals and all over the world. It speeds up the coding work, and we get more comfort in using jQuery.