本記事では、jQueryで複数のオブジェクトや配列に対して繰り返し処理を行う時に使用されるeach()メソッドの使い方について詳しく解説しています。
JavaScriptの学習におすすめ参考書
改訂3版JavaScript本格入門 ～モダンスタイルによる基礎から現場での応用まで
| 出版社 | 技術評論社 |
|---|---|
| 著者 | 山田 祥寛 |
| 発売日 | 2023/2/13 |
| ページ数 | 624ページ |
| レビュー (Amazon) | (4件) |
先輩くん
10万部突破したJavaScriptの本が大幅増補改訂し7年ぶりに発売されたよ！
後輩ちゃん
最新の基本文法から、開発に欠かせない応用トピックまで学ぶことが出来るよ！
綺麗なコードが書けるようになる！
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック
| 出版社 | オライリージャパン |
|---|---|
| 著者 | Dustin Boswell / Trevor Foucher |
| 発売日 | 2012/6/23 |
| ページ数 | 260ページ |
| レビュー (Amazon) | (620件) |
先輩くん
より良いコードを書きたい人におすすめの本だよ！
後輩ちゃん
10以上前の書籍ですが、内容は今でも役に立つものばかりです！
each()メソッドは2種類ある
each()メソッドが2種類もあるってどういうことですか！？
HTML要素に対して繰り返し処理を行うメソッドとオブジェクトや配列に対して繰り返し処理を行うメソッドに分かれているんだよ！
HTML要素に対して繰り返しを行う
まずは、HTML要素に対して繰り返し処理を行うeach()メソッドの使い方について紹介するね！
$("要素").each(function (index) {
/* 処理を記述 */
});実際に、HTML要素を取得して情報をコンソールログに出力するサンプルコードを作成したので紹介するね！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<ul class="prefectures">
<li class="prefectures__list">東京</li>
<li class="prefectures__list">北海道</li>
<li class="prefectures__list">大阪</li>
</ul>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="index.js"></script>
</body>
</html>$(".prefectures__list").each(function (index) {
console.log(`要素${index}番目のテキストは「${$(this).text()}」です。`);
});HTML要素は$(this)で参照することが出来るよ！
オブジェクト・配列に対して繰り返しを行う
次に、オブジェクト・配列に対して繰り返し処理を行うeach()メソッドの使い方について紹介するね！
$.each(オブジェクト・配列 ,function (index, value) {
/* 処理を記述 */
});実際に、オブジェクト・配列を取得して情報をコンソールログに出力するサンプルコードを作成したので紹介するね！
/* 配列の繰り返し処理 */
const fruits = ["apple", "banana", "melon"];
$.each(fruits, function (index, value) {
console.log(`配列${index}番目の値は${value}です。`);
});
/* オブジェクトの繰り返し処理 */
const person = {
name: "Taro",
age: 18,
sex: "man",
};
$.each(person, function (index, value) {
console.log(`${index}:${value}`);
});
DMM WEBCAMP 
CodeCamp 
TechAcademy 
