jQuery.each()?jQuery.each(collection, callback) (alias $.each) is a generic iterator for arrays, array-like objects, and plain objects (since jQuery 1.0). It returns the collection you passed in.
$.each(array, function(index, value) { ... })
$.each(object, function(key, value) { ... })
return false → break
other return → continue
$.each([52, 97], fn) // index 0 → 52, index 1 → 97| Need | Use |
|---|---|
| Array / object loop | $.each(collection, fn) |
| DOM elements only | $(sel).each(fn) |
| Build a new array | $.map(collection, fn) |
jQuery.each()Pass a collection and a callback; optionally break with return false.
$.each(collection, function (indexOrKey, value) { ... }).index/key and value (or this) inside the callback.false to stop early when needed.| Piece | Required? | Role |
|---|---|---|
collection | Yes | Array, array-like, or plain object |
callback | Yes | Runs once per item |
| Return value | — | Same collection (first argument) |
function each(collection, callback):
if collection is array-like:
for i from 0 to length - 1:
result = callback(i, collection[i])
if result === false: break
else:
for each own key in collection:
result = callback(key, collection[key])
if result === false: break
return collectionKeep these facts handy while iterating with jQuery.
| Topic | Detail |
|---|---|
| Syntax | jQuery.each(collection, callback) |
| Since | jQuery 1.0 |
| Array callback | function(index, value) |
| Object callback | function(key, value) |
| Break | return false |
| Returns | Original collection |
| DOM cousin | $(sel).each() |
Pick a sample collection and watch $.each walk each entry.
Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.
Official style: index and value for each item.
$.each([52, 97], function (index, value) {
console.log(index + ": " + value);
});
// 0: 52
// 1: 97(index, value).0, value 52.1, value 97.Plain objects yield key/value pairs.
var obj = {
flammable: "inflammable",
duh: "no duh"
};
$.each(obj, function (key, value) {
console.log(key + ": " + value);
});
// flammable: inflammable
// duh: no duhreturn falseStop the loop as soon as a condition matches.
var lines = [];
$.each(["a", "b", "c", "d"], function (i, letter) {
lines.push(letter);
if (letter === "c") {
return false; // break
}
});
console.log(lines.join(", ")); // "a, b, c"letter === "c", return false ends the loop."d" is never visited.Array.forEach cannot break this way.Build a total from array values.
var prices = [9.99, 14.5, 3.25];
var total = 0;
$.each(prices, function (i, price) {
total += price;
});
console.log(total.toFixed(2)); // "27.74"total accumulates outside the callback.$.each.toFixed(2) prints currency-style text.Check these before choosing $.each over other loops.
$(sel).each()DOM iteration belongs on the collection method. $.each is for any array/object you already have.
this boxes primitivesPrefer the value argument for numbers/strings. this may be an Object wrapper.
false breaks the loopReturning 0, null, or undefined does not stop iteration — use explicit return false.
$.map$.each is for side effects. Transforming values into a new list is cleaner with $.map.
jQuery.each() has shipped since jQuery 1.0 and works in all modern browsers with jQuery loaded. It is a pure iteration helper (arrays and objects), not a DOM-only API.
Supported everywhere jQuery runs in the browser. Use it for arrays, array-likes, and plain objects.
Bottom line: Call $.each(collection, fn) for generic loops. Return false to break. Use $(sel).each() for DOM selections.
| Approach | Cost | Best for |
|---|---|---|
$.each(arr, fn) | O(n) | Arrays / objects with early exit |
arr.forEach(fn) | O(n) | Arrays only (no break) |
for / for…of | O(n) | Hottest loops / fine control |
For typical UI sizes, $.each is fine. Prefer native loops only when profiling shows iteration is hot.
return false stops immediately.$(sel).each() for selected elements.$.map when building a new array.One line: $.each(collection, fn) walks arrays and objects — return false to break, and use collection .each() for DOM lists.
Learn how jQuery.map builds a new array from a collection.
8 people found this page helpful