反復処理

2024 7/30

2024.05.18 2024.07.30

eachメソッドは、指定した要素に対して順番に処理を実行するためのメソッドです。

each

記法

$(selector).each(function(index, element) {
　// 処理内容
});
============================
selector : 操作対象の要素
index : 要素のインデックス
element : 対象要素

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>eachメソッドについて</title>
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <ul id="item_list">
      <li class="item">Item 1</li>
      <li class="item">Item 2</li>
      <li class="item">Item 3</li>
    </ul>

    <!-- CDN取得 -->
    <script src="CDNのURL"></script>
    <script src="./main.js"></script>
  </body>
</html>

// ページの読み込みが完了
$(function () {
  // 各リストアイテムの背景色をインデックスに基づいて設定
  $("#item_list .item").each(function (index, element) {
    var colors = ["#bfdd9e", "#56c1db", "#f4af2b"];
    // colors配列からインデックスに基づいて背景色を適用
    $(element).css("background-color", colors[index % colors.length]);
  });
});

/* リストアイテムのスタイル */
#item_list {
  list-style-type: none;
  padding: 0;
}

.item {
  padding: 10px;
  margin-bottom: 5px;
}

出力結果

Item 1
Item 2
Item 3