HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>jQuery .addClass callback</title>

  <style>

    .item-0 { background: #ffe0e0; }

    .item-1 { background: #e0ffe0; }

    .item-2 { background: #e0e0ff; }

    li { padding: 6px 10px; margin: 4px 0; list-style: none; border: 1px solid #ccc; max-width: 200px; }

  </style>

</head>

<body>

  <ul>

    <li>Alpha</li>

    <li>Beta</li>

    <li>Gamma</li>

  </ul>

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

  <script>

    $("ul li").addClass(function(index) {

      return "item-" + index;

    });

  </script>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .addClass(function) — item-N (Try It)