each Iteration

each Iteration: free step-by-step lesson with examples, common mistakes, and interview tips — part of jQuery Tutorial on Toolliyo Academy.

8 min read Updated 8/24/2026

On this page

jQuery Tutorial · Lesson 54 of 100

each Iteration

Setup & DOM ✓ → Events Effects AJAX ✓ → Perf & Integrate → Ship & Projects

Perf & Integrate · 3 — Harden · ~10 min · Traversal and Plugins

What is this?

each(fn) iterates a collection; inside, this is the DOM element and arguments are (index, element). Return false to break early.

Why should you care?

QueryVerse bulk validates or paints rows without converting everything to arrays first.

See it live — copy this example

Examples include the jQuery 3.7 CDN. Paste into an HTML file or use Run Example to preview.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>QueryVerse</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 1.25rem; }
    .box { padding: .75rem; border: 1px solid #ccc; border-radius: 8px; margin: .5rem 0; }
    .muted { color: #666; }
    button { margin-right: .35rem; margin-top: .35rem; }
    input, select, textarea { margin: .25rem 0; }
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ddd; padding: .4rem .55rem; text-align: left; }
    .hidden { display: none; }
    .row-odd { background: #f7f7f7; }
    .active { font-weight: 700; }
    .toast { background: #111; color: #fff; padding: .5rem .75rem; border-radius: 6px; }
  </style>
</head>
<body>
  <ul id="ops" class="box">
    <li data-ok="1">Chennai DC</li>
    <li data-ok="0">Offline hub</li>
    <li data-ok="1">Pune DC</li>
  </ul>
  <button type="button" id="run">Mark statuses</button>
  <p id="out" class="muted"></p>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function () {
  $('#run').on('click', function () {
    var bad = 0;
    $('#ops li').each(function (i, el) {
      var $el = $(el);
      var ok = String($el.data('ok')) === '1';
      $el.toggleClass('muted', !ok);
      if (!ok) bad += 1;
    });
    $('#out').text('offline count=' + bad);
  });
});
</script>
</body>
</html>

Run Example »

Edit the code below and click Run to see the result in Toolliyo’s live editor.

Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>QueryVerse</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 1.25rem; }
    .box { padding: .75rem; border: 1px solid #ccc; border-radius: 8px; margin: .5rem 0; }
    .muted { color: #666; }
    button { margin-right: .35rem; margin-top: .35rem; }
    input, select, textarea { margin: .25rem 0; }
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ddd; padding: .4rem .55rem; text-align: left; }
    .hidden { display: none; }
    .row-odd { background: #f7f7f7; }
    .active { font-weight: 700; }
    .toast { background: #111; color: #fff; padding: .5rem .75rem; border-radius: 6px; }
  </style>
</head>
<body>
  <ul id="ops" class="box">
    <li data-ok="1">Chennai DC</li>
    <li data-ok="0">Offline hub</li>
    <li data-ok="1">Pune DC</li>
  </ul>
  <button type="button" id="run">Mark statuses</button>
  <p id="out" class="muted"></p>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function () {
  $('#run').on('click', function () {
    var bad = 0;
    $('#ops li').each(function (i, el) {
      var $el = $(el);
      var ok = String($el.data('ok')) === '1';
      $el.toggleClass('muted', !ok);
      if (!ok) bad += 1;
    });
    $('#out').text('offline count=' + bad);
  });
});
</script>
</body>
</html>

Result