jQueryでeachメソッドを使って繰り返し処理をする方法【初心者向け】
プログラミング初心者向けに、jQueryでeachメソッドを使った繰り返し処理の使い方について解説しています。eachメソッドの書き方を解説し、実際にプルダウンリストの値を繰り返し処理で書き換えるコードをご紹介していますので、ぜひご覧ください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
どのプログラミング言語にも繰り返し処理を実装するためのメソッドは必ず存在しています。jQueryにももちろん存在し、eachというメソッドで実装することができます。
今回は、JavaScriptのライブラリであるjQueryのeachメソッドについて解説していきたいと思います。
jQueryについてそもそもよく分からないという方は、jQueryとは何なのか解説した記事をまずご覧ください。
なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。
なお、今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
目次
eachメソッドとは
eachメソッドは、jQueryに実装された便利メソッドです。
jQueryは、HTML要素（DOM)をJavaScript側で操作することに特化したライブラリであり、eachメソッドを使うことで、プルダウン選択肢などの複数のHTML要素をfor文のように一括で処理することができます。
また、eachメソッドはDOMだけでなく、配列やオブジェクトが持つ複数のデータを一括処理することができる汎用メソッドです。
jQuery.each()を適切に使いこなすことで、for文などのJavaScript標準の関数ではできなかった複数要素に関する処理が容易に実現できます。
eachメソッドの構文
1.DOMを操作する場合専用の構文
$(セレクタ).each( function( index, element ){
// DOMに関する処理
};
まずはこの構文だけ覚えて使いこなせるようになりましょう。
2.汎用的構文
$.each( 対象オブジェクト, function( key, value ){
// 各データに関する処理
});
「対象オブジェクト」の部分に、配列やオブジェクトを格納した変数を記述することで、中身のデータを一括して処理することができます。
各構文について
それぞれの構文のfunctionが持つ引数は、仮引数です。ラムダ式をご存知の方は、ラムダ式と考えてください。eachメソッドは操作対象が持つ特定構造の全複数要素に対して個別処理することが前提のため、自動的に仮引数に値がセットされる仕組みです。function( x , y ){ }の部分は、以下のような書き換えも可能です。
ラムダ式でfunction部分を記述する場合
( index, element ) => { // 各データに関する処理 }
1.DOMを操作する場合専用の構文について
DOMを操作する場合専用の構文
jQueryでは、$(セレクタ)と記述するだけでHTML要素（DOM)が取得できますが、eachメソッドは「複数要素が取得された状態」を前提としていることに注意してください。
例えば、以下のようなHTMLがあった場合
HTML
<div id="divArea"> <p>段落１の文章です</p> <p>段落２の文章です</p> <div>
複数のpタグをeachメソッドにより一括処理することができます。この場合、$(セレクタ) 部分の指定方法は $(“#div > p”) または $(“#div”).children() となります。
jQueryにより複数のpタグ要素を取得して、以下のような操作が可能です。
JavaScript
$("#divArea > p").each( function(index, element) {
console.log("＜" + index + "件目の内容を出力＞");
console.log( $(element).text() ); // pタグで囲まれた文字列を出力
});
実行結果
＜0件目の内容を出力＞ 段落１の文章です ＜1件目の内容を出力＞ 段落２の文章です
function(index, element)の仮引数であるindexとelementには、$(“#divArea > p”)で取得した情報を基に、自動的に中身がセットされます。セットされる内容は、以下の通りです。
| index | 今何回目の処理を実行中か整数で保持する。0からカウント。 |
| element | HTML要素を単体で持つ。これは、document.getElementById(“xxx”);で取得した単一のHTML要素（DOM）と等価 |
また、取得したHTML要素を格納したelementに対してjQueryオブジェクトとしての操作を実行したい場合は$(element)と記載するだけで、DOMオブジェクトをラッピングしたjQueryオブジェクトのメソッドであるval()等の操作が利用可能です。
elementを単体で使うことも可能で、その場合は先ほどのプログラムにおけるeach処理ブロックを以下のように書き換えることができます。
console.log( element.textContent ); // HTML要素の属性にアクセスしている // console.log( $(element).text() ); // jQueryのtext()メソッドを利用
2.汎用的構文について
eachメソッドの汎用的構文
functionの引数は仮引数ですので名前はなんでも構いません。
汎用的な構文ですので、$each()の第1引数の型によってfunction()の仮引数にセットされる内容も変わってきます。
場合分けを詳しく見ていきましょう。
2-1.対象オブジェクトがDOMの場合
$.each( $(セレクタ), function( index, element ){ xxx } )
DOM操作専用の構文とほぼ変わりません。
また、functionの具体的処理部分は「１．DOMを操作する場合専用の構文」と全く同一になります。
2-2.対象オブジェクトが配列( [ ] )の場合
$.each( 配列, function( index, value ){ xxx } )
for文と同じように、配列[i]という記述方法が可能です。
for文と異なる点は、いきなり配列[i]の値がvalueとして操作可能である点です。
配列は、JavaScript標準のforEachメソッドが用意されていますので、
forEachを使いこなせる方はforEachを使った方が良いでしょう。
2-3.対象オブジェクトがオブジェクト型( { } )の場合
$.each( obj, function( key, value ){ xxx } )
オブジェクトだけindexではなくkeyと表記する理由は、
オブジェクトは保持するデータの順番に定めがないためです。
この構文は、オブジェクトが持つvalue部分だけ全て取り出したい場合に使うと良いでしょう。
オブジェクトが持つデータを一括操作したい場合、JavaScript標準のfor…in句が用意されていますので、状況に応じて使い分けてみると良いでしょう。
具体的な扱い方は、後述するサンプルプログラムをご覧ください。
jQueryにも繰り返し文があるんですねー。
そうそう。jQueryで取得した要素の数って何個かわからない場合もあるし、要素オブジェクトもjQueryで取得しているから、jQueryのeachメソッドで処理したほうがいいんだよ。
処理には関数を書けばいいんですね？
その通り！実際にeachメソッドを書いてみよう！
実際に書いてみよう
サンプルプログラム１
jQueryのeachメソッドを使って、画面表示中のプルダウンリストの選択肢文字列を動的に変更するプログラムをご紹介します。
画面イメージ
画面上のボタンを押すと、プルダウンの選択肢がインデックス番号付きに変化します。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HelloTechAcademy</title>
<link rel="stylesheet" href="sample.css">
</head>
<body>
<p id="title">Hello TechAcademy !</p>
<div id="area1">
<select id="pd">
<option>リンゴ</option>
<option>オレンジ</option>
<option>メロン</option>
</select>
</div>
<button type="button" id="btn1">プルダウン変更</button>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="techAcademy.js"></script>
</body>
</html>
JavaScript
$(function(){
// 指定ボタンを押下すると処理を開始する
$("#btn1").on("click", function() {
// selectタグのidをキーにDOMを取得し、
// その子要素である複数のpタグDOMについて、一括処理を行う。
$("#pd").children().each( (index, element) => {
var text = $(element).text(); // 各pタグが保持する文字列
var newText = (index + 1) + " : " + text;
$(element).text(newText); // 各elementのタグ内文字列を上書き
})
});
});
CSS
#title {
margin-bottom: 4px;
}
#area1 {
margin-bottom: 18px;
}
/* プルダウンのデザイン */
#pd {
margin-top: 10px;
width: 120px;
height: 30px;
padding-top: 2px;
padding-left: 10px;
position: relative;
border: 1px solid #adaeac;
background: -webkit-linear-gradient(top, #fff 0%,#eae7de 100%);
background: linear-gradient(to bottom, #fff 0%,#eae7de 100%);
}
サンプルプログラム２
jQueryのeachメソッドを使って配列とオブジェクトの全要素を一括表示するプログラムをご紹介します。
JavaScript
var objData = { key1 : "りんご" , key2 : "オレンジ", key3 : "メロン" };
$.each( objData, function(key, value){
console.log(key + " : " + value);
});
var arrayData = ["apple", "orange", "melon"];
$.each( arrayData, function(index, value){
console.log(index + " : " + value);
});
実行結果
key1 : りんご key2 : オレンジ key3 : メロン 0 : apple 1 : orange 2 : melon
まとめ
jQueryのeachメソッドを使うことで、複数のDOMオブジェクトを一括処理することができました。
DOM操作は難易度が高いので、デバッグ機能をうまく使いながら目的の操作を成功させていきましょう。
$.each()って見慣れない形ですね。
この場合、jQueryが持っているeachメソッドって意味になるんだ。
サンプルには引数が無かったのですが、取れますか？
function(index, value)とすると、最初に書いた引数にインデックスが、valueに値が自動で代入されるよ。
[お知らせ]TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。jQueryを使ってリッチなWebサービスを作りたい方はぜひご覧ください。
執筆してくれたメンター
| 寺谷文宏
Webアプリケーションエンジニアとして数多くのプロジェクトを経験し、 TechAcademyではフロントエンド、Javaコースを担当。 |
