Get the Index in jQuery .each() (callback signature)

To get the index in a jQuery .each() loop, accept the index as the first parameter of the callback: $('.elements').each(function (index, element) { ... }). No external counter needed.

Contents

The callback signature
Using both arguments
Index-only — drop the second parameter
Static helper for arrays and plain objects
Early exit — return false
Vanilla equivalent
Frequently asked questions
Related guides
References

Last verified: 2026-05-17 with jQuery 3.7. Originally published 2022-07-13, rewritten and updated 2026-05-17.

The callback signature

$('.elements').each(function (index, element) {
    console.log(index, element);
});

jQuery passes two arguments to the callback: the zero-based index and the raw DOM element. Inside the callback, this is the same DOM element — useful for terse code like $(this).addClass(...).

jQuery .each(index, element) callback signature with this binding and early-return break

Using both arguments

$('.elements').each(function (index, element) {
    // Set the data-index attribute on each element
    element.dataset.index = index;

    // Or with jQuery
    $(element).attr('data-index', index);

    // 'this' is the same DOM element
    $(this).text(`Item ${index + 1}`);
});

Index-only — drop the second parameter

$('.elements').each(function (index) {
    console.log(index);  // 0, 1, 2, ...
});

Static helper for arrays and plain objects

$.each([10, 20, 30], function (index, value) {
    console.log(index, value); // 0 10, 1 20, 2 30
});

$.each({ a: 1, b: 2 }, function (key, value) {
    console.log(key, value);   // 'a' 1, 'b' 2
});

For plain objects, the “index” is the property key, not a number. Otherwise the shape matches the instance method.

Early exit — return `false`

$('.elements').each(function (index, element) {
    if (element.classList.contains('stop-here')) {
        return false;  // breaks out of the loop
    }
});

Returning false stops iteration immediately, like break. Returning anything else continues to the next element.

Vanilla equivalent

document.querySelectorAll('.elements').forEach((element, index) => {
    console.log(index, element);
});

forEach passes (element, index) — note the order is the reverse of jQuery’s. Not interchangeable verbatim.

Frequently asked questions

What’s the difference between the two .each() signatures?

There are two: $.each(collection, callback) is the static helper that iterates over arrays or plain objects, with the callback receiving (index, value). $(selector).each(callback) is the instance method on a jQuery set, with the callback receiving (index, element). Same first parameter shape (index), different second parameter.

Why is element a raw DOM node, not a jQuery object?

jQuery hands you the bare DOM element for performance — most of the time you can do what you need with native properties (element.value, element.classList) without paying for another jQuery wrap. When you do need the jQuery wrapper, wrap it explicitly: $(element).addClass('x') or, inside the callback, $(this).addClass('x') (which is what this points to).

Can I break out of .each() like break in a regular loop?

break doesn’t work because .each() is a function call, not a loop. Return false from the callback to stop iteration — equivalent to break. Returning any other value (or nothing) is equivalent to continue.

Should I just use a native for...of loop instead?

For new code without other jQuery dependencies, yes — document.querySelectorAll('.elements').forEach((el, i) => ...) reads the same and works in every modern browser. .each() is still fine when you’re already in a jQuery codebase and need this-binding semantics.