jQuery .each() Method

What You’ll Learn

The .each() traversing method runs a callback function for every element in the current jQuery collection. This tutorial covers index and this, wrapping with $(this), breaking early with return false, official jQuery click demos, and when explicit iteration beats implicit jQuery chaining.

Introduction

A jQuery selector often matches multiple DOM elements — every <li> in a list, every row in a table, every card in a grid. When you need to run custom logic on each matched element individually, jQuery provides .each().

Available since jQuery 1.0, .each() accepts a callback function that fires once per element. The callback receives the zero-based index and the DOM element; inside the function, this also points to that same element. The method returns the original jQuery object so you can keep chaining.

Understanding the .each() Method

Given a jQuery object with one or more matched elements, .each(function(index, element) { ... }) loops through the collection in document order. The callback’s this keyword refers to the current DOM node — use native properties like this.style directly, or wrap with $(this) for jQuery methods.

Return false from the callback to stop the loop immediately. Many jQuery methods perform implicit iteration on their own — $("li").addClass("active") touches every match without needing .each(). Reach for explicit .each() when each element needs different treatment or when you need the loop index.

📝 Syntax

General form of .each:

.each( function( index, element ) {
  // this === element
} )

Parameters

• function (required) — a callback executed once per matched element. Receives the zero-based index and the DOM element. this inside the callback refers to the current element.

Return value

• The original jQuery object (unchanged collection), enabling further chaining after the loop.

Official jQuery API list iteration example

$( "li" ).each( function ( index ) {
  console.log( index + ": " + $( this ).text() );
} );
// 0: foo
// 1: bar

Examples Gallery

Examples 1–4 follow the official jQuery API documentation. Use DevTools or the Try-it links to run each snippet in the browser.

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

0: foo
1: bar

$( document.body ).on( "click", function () {
  $( "div" ).each( function ( i ) {
    if ( this.style.color !== "blue" ) {
      this.style.color = "blue";
    } else {
      this.style.color = "";
    }
  } );
} );

Each click toggles blue color on every div.
Uses native this.style — no $(this) needed.

$( "span" ).on( "click", function () {
  $( "li" ).each( function () {
    $( this ).toggleClass( "example" );
  } );
} );

Click span → all li items toggle italic "example" class.

$( "button" ).on( "click", function () {
  $( "div" ).each( function ( index, element ) {
    $( element ).css( "backgroundColor", "yellow" );
    if ( $( this ).is( "#stop" ) ) {
      $( "span" ).text( "Stopped at div index #" + index );
      return false;
    }
  } );
} );

Divs 1–3 turn yellow; loop stops at #stop.
Span shows "Stopped at div index #3".

$( ".bar" ).each( function ( index ) {
  $( this ).css( "width", ( index + 1 ) * 40 + "px" );
} );

// Same width on all — no .each() needed:
// $( ".bar" ).css( "width", "120px" );

Bar 0 → 40px, bar 1 → 80px, bar 2 → 120px
Progressive widths require per-index logic.

🚀 Common Use Cases

• Indexed styling — set width, opacity, or delay based on loop index.
• Collect data — build an array of IDs or values by reading each element inside the callback.
• Conditional processing — apply different logic per element and break early with return false.
• Native DOM APIs — use this.dataset, this.value, or this.style directly.
• Debug logging — inspect each matched node during development.
• Batch validation — check every form field and stop at the first invalid input.

📝 Notes

• Available since jQuery 1.0; works in all jQuery 1.x, 2.x, and 3.x versions.
• Index parameter is zero-based — first element is index 0.
• this and the element parameter refer to the same DOM node.
• return false breaks the loop; return true or no return continues.
• Do not wrap every jQuery call in .each() — prefer implicit iteration when possible.
• For arrays/objects (not DOM sets), use the static jQuery.each() utility instead.

💡 Best Practices