A repository of over 1000 quality jQuery plugins

jQuery jQuery.each()

Learn all about the jQuery function jQuery.each().

The $.each() function is not the same as $(selector).each(), which is used to iterate, exclusively, over a jQuery object. The $.each() function can be used to iterate over any collection, whether it is an object or an array. In the case of an array, the callback is passed an array index and a corresponding array value each time. (The value can also be accessed through the this keyword, but Javascript will always wrap the this value as an Object even if it is a simple string or number value.) The method returns its first argument, the object that was iterated.

Note: The $.each() function internally retrieves and uses the length property of the passed collection. So, if the collection has a property called length — e.g. {bar: 'foo', length: 10} — the function might not work as expected.

1
2
3
$.each([ 52, 97 ], function( index, value ) {
alert( index + ": " + value );
});

This produces two messages:

0: 52
1: 97

If an object is used as the collection, the callback is passed a key-value pair each time:

1
2
3
4
5
6
7
var obj = {
"flammable": "inflammable",
"duh": "no duh"
};
$.each( obj, function( key, value ) {
alert( key + ": " + value );
});

Once again, this produces two messages:

flammable: inflammable
duh: no duh

We can break the $.each() loop at a particular iteration by making the callback function return false. Returning non-false is the same as a continue statement in a for loop; it will skip immediately to the next iteration.