jQuery.each() JQ Home  <<  Utilities  <<  jQuery.each()

Generic iterator function.

Description

The jQuery.each() jQuery General utility method, is a generic iterator function used to iterate over objects and arrays.

Shorthand version $.each()

  1. For arrays and array-like objects (objects containing a length property with a value), the jQuery.each() jQuery General utility method iterates using a numeric index from 0 to length - 1.
  2. For other objects the jQuery.each() jQuery General utility method iterates using the object's named properties.

Do not confuse this class method with the .each() method which is used for iterating over jQuery objects.

Syntax

Signature Description
jQuery.each( collection,
             callback(iterator, value) )
A generic iterator function used to iterate over objects and arrays.

Parameters

Parameter Description Type
collectionThe object or array/array-like object to iterate over.Object
callback(iterator, value)A function to process on each item / property of the collection.
iterator - The current array index value of the item / the object key.
value - The array item value / object key value.
  • The callback is fired in the context of the collection we are iterating over, and the keyword this refers to the value of the array item value / object key value.
Function

Return

The collection object that was iterated over.

jQuery.each( collection, callback(iterator, value) ) ExamplesUtilities  <<  Top

A generic iterator function used to iterate over objects and arrays.

In the example below when we press the left button the first time we create an array and iterate over it.

When we press the rightt button the first time we create an object and iterate over it.



$(function(){
  $('#btn10').one('click', function(){
    var arr0 = [ 7, 2, 2, 5 ];
    $.each(arr0, function(index, value) {
      $('#div10').append( index + ': ' + value + '<br>');
    });
  });

  $('#btn11').one('click', function(){
    var obj = {"str1":"A stitch in time ",
               "str2":"Saves nine"};
    $.each(obj, function(key, value) {
      $('#div10').append( key + ': ' + value + '<br>');
    });
  });
});


div10. Some initial text.

Press the button below to action the above code:

           

Related Tutorials

jQuery Intermediate Tutorials - Lesson 9 - jQuery General Utilities