jQuery jQuery.each() Method

What You’ll Learn

The jQuery.each() utility walks arrays, array-like objects, and plain objects with a single callback pattern. This tutorial covers syntax, five worked examples, how return false breaks the loop, and how $.each differs from DOM .each() and native Array.forEach.

Introduction

Looping over data is one of the most common tasks in JavaScript — whether you have a list of numbers, a configuration object, or an array-like NodeList. jQuery provides a generic iterator called jQuery.each() (also written $.each()) that handles all of these with one consistent API.

Unlike $(selector).each(), which only walks elements in a jQuery DOM collection, the utility form accepts any array or object as its first argument. That makes it ideal for data processing, object inspection, and plugin internals — anywhere you need a portable loop without binding to the DOM.

Understanding the jQuery.each() Method

jQuery.each(collection, callback) invokes your callback once for every enumerable property. For arrays and array-like objects, the callback receives (index, value) where index runs from 0 to length - 1. For plain objects, it receives (key, value) for each own enumerable property.

Returning false from the callback stops the loop immediately — the jQuery equivalent of break. Any other return value (including undefined) continues to the next item, like continue. The method always returns the original collection (the first argument), and inside the callback this refers to the current value.

📝 Syntax

General form of jQuery.each:

jQuery.each( collection, callback(indexOrKey, value) )
// or
$.each( collection, callback(indexOrKey, value) )

Parameters

• collection — an array, array-like object, or plain JavaScript object to iterate.
• callback — a function invoked for each item. For arrays: (index, value). For objects: (key, value). Return false to break the loop.

Return value

• Returns the same collection reference passed as the first argument.

Minimal workflow

$.each([10, 20, 30], function (index, value) {

  console.log(index + ": " + value);

});

// 0: 10
// 1: 20
// 2: 30

Examples Gallery

Each example uses $.each(). Open DevTools or use the Try-it links to run them interactively.

$.each([52, 97], function (index, value) {

  console.log(index + ": " + value);

});

0: 52

1: 97

var obj = { flammable: "inflammable", duh: "no duh" };



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

  console.log(key + ": " + value);

});

flammable: inflammable

duh: no duh

$.each(["a", "b", "c", "d"], function (i, letter) {

  console.log(letter);

  if (letter === "c") {

    return false; // stop — "d" is never logged

  }

});

a

b

c

var prices = [9.99, 14.50, 3.25];

var total = 0;



$.each(prices, function (i, price) {

  total += price;

});



console.log("Total: " + total.toFixed(2));

Total: 27.74

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

var obj = { one: 1, two: 2, three: 3, four: 4, five: 5 };



$.each(arr, function (i, val) {

  $("#" + val).text("Mine is " + val + ".");

  return val !== "three"; // stop after "three"

});



$.each(obj, function (i, val) {

  $("#" + i).append(document.createTextNode(" — " + val));

});

<div id="one">Mine is one. — 1</div>

<div id="two">Mine is two. — 2</div>

<div id="three">Mine is three. — 3</div>

<div id="four"></div>  (unchanged — array loop stopped early)

<div id="five"></div>  (unchanged)

🚀 Use Cases

• Config inspection — walk settings objects and apply defaults or validate keys.
• Data aggregation — sum, filter, or transform arrays without manual index management.
• Array-like objects — iterate NodeLists, arguments objects, or jQuery internal collections.
• Plugin internals — jQuery itself uses $.each throughout its source for portable loops.
• Early exit searches — find the first matching item and return false to stop.

📝 Notes

• jQuery.each() is not the same as $(selector).each() — different methods, different first arguments.
• Only return false breaks the loop; returning true or any other value continues.
• Inside the callback, this equals the current value (primitives are wrapped as Object).
• The method returns the first argument — the collection itself — not a new array or object.
• Available since jQuery 1.0 — one of the oldest and most stable jQuery APIs.

💡 Best Practices