Learn about Each Method in jQuery

The each function is used to loop through elements in an array. It was constructed to make DOM looping easier. With each(), we loop through each element in the range of specified selectors. There is a distinction between $.each() which is used with objects and arrays, and .each(), which  is used with collections. They both go over all the elements of the specified object.  Just like with for loops and arrays, the iteration starts from 0 and the index is updated with each callback.

Let’s create a short HTML form which includes a text input field and a button that adds the input value into an existing array, like so:

<input id='na' type='text' /> <input id = 'enter' type='button' value = 'put in array' />

We’ll also create an empty div element, like so:

<div id='container'></div>

Every time the user adds a name to the array by clicking the button, we want to display that array in its final form. We are going to use jQuery to make all of that work.

1.(document).ready(function(){
2.  function show_array(){
     }

3. var names = [ 'danny' , 'benny' , 'joe'];
4. show_array();

5. $('#enter').click(function(){
6.  var na = $('#na').val();
7.  names.push(na);
8.  show_array();
}

});

Explanation:
When a visitor enters the page, immediately the show_array() function, which displays the array, is called (line 4).

In line 3, we are creating the array, and naming it ‘names’.

In line 5, we are creating an event handler for our ‘put in array’ button. We are selecting the button with its id (‘enter’).

In order to retrieve the value, the user types into the text box, we are creating the na variable and giving it the value of the text area by selecting the text area’s id (‘na’) and extracting its value using the .val() method (see line 6).

In line 7, we are inserting that value into our names array using the push() method, which takes an element or a series of elements and adds them to the end of the specified array. In this case, the value that’s being added to the array is the text that appears in the box when the button is clicked.

In line 8, we are displaying the new (extended) array to the user.

Now all that’s left to do is create the function that displays the array. For this purpose, we are going to use the each method. Like so:

 1. function show_array(){
 2. $('#container').text(' ');
 3. $.each(names, function(index, value){
 4.    $('#container').append(value + ' </br>');
 }
}

Explanation:
Line 2 – we start by clearing the ‘container’ div, using the text() method, so that we don’t get duplicate dates.

Line 3 – We now loop over all of the values in the array using the each method. The each method takes an array name as a parameter (in this case, ‘names’), and an additional parameter which is a callback function, which takes in 2 parameters: ‘index’ which is the position of each element in the array(0,1,2,3, etc.) and ‘value’ which is the actual value of the element.

In line 4, we are appending each of the values to the div element. We are also appending a line break after each value.

Final result:

$(document).ready(function(){
 var names = ['danny' , 'benny' , 'joe'];
 show_array(names);
 
 function show_array(names){
  $('#container').text('');
  $.each( names, function(index, value){
     $('#container').append(value + '<br/>');
 });
};


 $('#enter').click(function(){
  var na = $('#na').val();
  names.push(na);
  show_array(names);
});

});

In summary, we have created an application which demonstrates the use of each() and looping through arrays. $.each() is an iterator function for looping over object, arrays, and array-like objects. Plain objects are iterated via their named properties while arrays are iterated via their indices.

Arrays are a powerful tool that would come in handy if you want to store data in the front-end.