Iterating with each()
Basic each()
.each() loops over a jQuery collection one element at a time, calling your callback function once per element in document order. Inside the callback, this refers to the current raw DOM element being visited.
Example: Basic each()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<li>One</li><li>Two</li><li>Three</li>
<script>
$("li").each(function() {
console.log($(this).text());
});
</script>
</body>
</html>Using the Index
The index parameter passed to each()'s callback tells you the zero-based position of the current element within the collection. This is useful when the action you're taking depends on where an element falls in the list, like alternating row colors.
Example: Using the Index
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<li>One</li><li>Two</li><li>Three</li>
<script>
$("li").each(function(index) {
console.log(index, $(this).text());
});
</script>
</body>
</html>Stopping each()
Return false from the each() callback to stop the loop early, similar to a break statement in a regular for loop. Without this, each() always visits every element in the collection before finishing.
Example: Stopping each()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<li>One</li><li>Two</li><li>Three</li>
<script>
$("li").each(function(index) {
if (index === 1) return false;
console.log($(this).text());
});
</script>
</body>
</html>each() with Data
each() is useful when every element in a selection needs different data applied to it, such as setting a unique data attribute or label based on its position or content. The callback gives you a chance to compute something specific to that one element before moving on.
Example: each() with Data
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<li>One</li><li>Two</li>
<script>
$("li").each(function(index) {
$(this).attr("data-position", index);
});
</script>
</body>
</html>Practical Iteration
Use each() when you need custom work done for every matched element that can't be expressed with a built-in jQuery method, like combining several property reads into one calculation per element. It's the general-purpose escape hatch when no specific jQuery method already does what you need.
Example: Practical Iteration
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input value="10"><input value="20">
<script>
let total = 0;
$("input").each(function() {
total += Number($(this).val());
});
console.log(total);
</script>
</body>
</html>Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: