jQuery .each() Method

What Is .each()?

.each(function) (since jQuery 1.0) runs a callback once for every matched element. Inside the callback, this is the current DOM element, and the first argument is the zero-based index.

// Official pattern
$("li").each(function (index) {
  console.log(index + ": " + $(this).text());
});

// this = DOM element | $(this) = jQuery wrapper
// return false → break the loop early

// Often unnecessary (implicit iteration):
$("li").addClass("foo");

How to Use .each()

Select a set, then run per-element logic in the callback.

1. Select the elements — e.g. $("li").
2. Call .each(function (index, element) { … }).
3. Use this or element for the current DOM node.
4. Wrap with $(this) when you need jQuery methods.
5. Return false to stop early; otherwise the loop continues.

Pseudocode

call $(set).each(callback)

for index from 0 to set.length - 1:
    element = set[index]
    result = callback.call(element, index, element)
    if result === false:
        stop looping   // like break

return the original jQuery set

Cheat Sheet

Keep these facts handy while looping a collection.

Live Preview

Number list items, stop early, or show when implicit iteration is enough.

Ready — pick an action and click Run.

jQuery Examples

Short, copy-ready snippets. Use Try It Yourself for a live editor.

var lines = [];
$("li").each(function (index) {
  lines.push(index + ": " + $(this).text());
});
$("#out").text(lines.join("\n"));

0: foo
1: bar

var lines = [];
$("li").each(function (index, element) {
  lines.push(
    index + " id=" + this.id +
    " text=" + $(element).text()
  );
});
$("#out").text(lines.join("\n"));

0 id=a text=Alpha
1 id=b text=Beta

// Unnecessary each
$("li").each(function () {
  $(this).text(function (i, t) { return t + " *"; });
});

// Clearer — same idea without each
// $("li").append(" *");

$("#out").text("Marked " + $("li").length + " items.");

Eat *
Sleep *
Be merry *
Marked 3 items.

var done = [];
$("div.box").each(function (index) {
  done.push($(this).text());
  if ($(this).is("#stop")) {
    $("#out").text("Stopped at index #" + index + " → " + done.join(", "));
    return false;
  }
});

Stopped at index #2 → A, B, Stop here

$("li").each(function (index) {
  $(this).text(function (i, t) {
    return (index + 1) + ". " + t;
  });
});

1. Eat
2. Sleep
3. Be merry

Performance Notes

The loop itself is fine. Cost grows with set size and heavy work inside the callback — keep the body small and scope the selector first.

Key Takeaways