$.each() Function in jQuery

Introduction

The "JQuery.each()" function is a general function that will loop through a collection (object type or array type). Array-like objects with a length property are iterated by their index position and value. Other objects are iterated on their key-value properties. The "JQuery..each()" function however works differently from the $(selector).each() function that works on the DOM element using the selector. But both iterate over a jQuery object.

Callback method

In the "JQuery..each()" method we're able to pass in an arbitrary array or object in which for each item will have the callback function executed.

The "$.each()" function loops over any type of collection, either an array or an object collection. The "JQuery..each()" function has a callback function in which we pass the indexing value and the corresponding value of each item of the array each time. We can access the value of the current index position in the loop using the "this" keyword and append it in any DOM element.

When you pass the array-like object to the .each() function, the callback can accept two arguments: index of the item, where index is the numerical zero-based index in the array of the current items and item is the value of the current array.

For example:  if we pass an array to the each function, it iterates over items in the array and accesses both the current item and its index position.

Syntax:

jQuery.each( collection, callback(indexInArray, valueOfElement) )

<script type="text/javascript">

        $(document).ready(function () {

 

            var arr = ["Goergie", "Johnson", "Agile", "Harrison", "Gaurav"];

 

            $.each(arr, function (index, value) {

                alert('Position is : '+ index + '  And  Value is : ' + value);

            });

        });

</script>

Output



As I described earlier the .each() function can also work with an object as the collection that contains the value as a key-value pair object.

If we used an object with the "JQuery..each()" function as the collection, then the callback function is passed as the key-value pair value for each of the items in the object collection. And we can easily access both values from the callback function.

For Example:

Here, I pass the object type collection to the ".each()" function. The following code will iterate over an object, accessing both the current item and its key.

Syntax:

jQuery.each( collection, callback(KeyOfElement, valueOfElement) )

<script type="text/javascript">

        $(document).ready(function () {

            var obj = {

                Name: "Gaurav", Language: "Jquery", Webiste: "C-Sharpcorner"

            };

 

            $.each(obj, function (key, value) {

                alert(key + ": " + value);

            });

        });

</script>

 

Output
 

We can also break the each() loop at a particular looping iteration by returning false from the callback function. The non-false or default value works the same as the continue statement in the looping and simple iterate next.

For Example:

<script type="text/javascript">

        $(document).ready(function () {

            var arr = ["one", "two", "three", "four", "five"];

            $.each(arr, function (index, item) {

                alert(index + ': ' + item);

                if (item=="three") {

                    alert("Stopped at index # : " + index);

                    return false;

                }

            });

        });

</script>

 

Output