桃太郎2017/9/192019/5/26こんにちは!フリーランスの桃太郎です。jQueryでは複数の要素の集まりに対して指定した処理を行うためのメソッドとしてeachメソッドがあります。この記事ではeachメソッドの基本eachメソッドで配列の繰り返し処理を行う方法など基礎的な内容から、実践的な内容についても解説していきます。まとめeachメソッドとは?それでは、まず最初にeachメソッドについて基本的な知識から勉強していきましょう!eachメソッドは、HTML要素・配列・オブジェクトなどに対して繰り返し処理を行うことができるメソッドになります。<li>サンプル3</li></ul>このリスト要素(li)1つずつに対して何か処理を行いたい時にeachメソッドは適しているわけです。次のような配列・オブジェクトなどに対しても同様です。'Tokyo'};それぞれの要素1つずつに対して、繰り返し何らかの処理を行いたい時にeachメソッドは効率よくプログラムを書くことができるのです。HTML要素での「each()」使い方この章では、HTML要素を対象にしたeachメソッドの使い方について見ていきましょう。一般的な構文や書き方、および実際のプログラミング手法について学んでいきます。一般的には、HTML要素に対してeach()を実行し繰り返し処理を記述する関数を指定すればOKです。//繰り返し処理を記述する})eachに指定する関数は引数として「index(インデックス番号)」「element(HTML要素)」を取得できます。この引数を上手く活用することで、HTML要素1つずつに対して効率よく処理を行うことができます。HTML要素に対して繰り返し処理を行う方法それでは、実際にeachメソッドを使ってプログラムを組み立ててみましょう!冒頭で紹介した次のリスト要素を見て下さい。<li>サンプル3</li></ul>このリスト要素を1つずつ取得してコンソールに出力するには次のように記述します。サンプル3この例では、リスト要素に対して1つずつのインデックス番号とテキストを出力しています。eachに設定した関数の引数「element」には、取得したHTML要素が格納されているので「$(element)」とすればリスト要素を取得できます。あとは、「text()」を使ってリスト要素のテキスト文字を取得することが可能です。構文が少し異なるので改めて書き方について学習し、実際のプログラム手法を学んでいきます。HTML要素を対象にする時とは違い、eachメソッドの第1引数に配列やオブジェクトを指定することになるので注意しましょう。//繰り返し処理を記述する})「$.each()」という記述に変更となり、その第1引数に処理を行いたい配列・オブジェクトを指定します。第2引数には、繰り返し処理を行うための関数を指定するのは前章と同様です。関数の引数には、「index(インデックス番号)」「value(値)」を取得することができます。配列要素に格納されている値1つずつをコンソールに出力するには、次のように記述します。6この例では、配列「array」をeachメソッドの第1引数に指定することで、各要素にアクセスできるようになります。value」を使うことで、実行結果のように要素1つずつを取得できているのが分かりますね。この方法はオブジェクトでもまったく同じように動作します。Tokyoこのように、配列をオブジェクトに置き換えても同様に動作しています。関数の第1引数は「インデックス番号」ではなく「プロパティ」が取得できているのが分かりますね。繰り返し処理を途中で終了する方法eachメソッドは繰り返し処理を実現しますが、ではその繰り返し処理を途中で終了させるにはどうすれば良いでしょうか?JavaScriptのfor文で繰り返し処理を途中で終了させるにはbreak文を使いますが、jQueryのeachにはbreak文は用意されていません。こちらも具体的なサンプルで確認して見ましょう。東京都の23区の家賃相場が昇順に並んでいるデータを示すHTML文があり、その相場が10万以下のものの価格に対して太字にする処理をjQueryで実施するとします。false」をしています。東京都台東区は15万なので、上の条件に合致せずeachメソッドの繰り返し処理が終了して結果的に太字になっていないことが確認できるかと思います。falseを記述することで、eachメソッドの繰り返し処理を終了することが可能です。こちらも具体的なサンプルで確認しましょう。先ほどのHTML文のサンプルに対して、家賃の相場が10万から26万の間のデータを太字にする処理をjQueryのeachメソッドにて行うとします。true」と記述している点に注目してください。true」で、後続の処理(太字に変える処理)をスキップして次の要素にeacheメソッドの処理が移ります。コールバック関数内でreturnする値をfalse/trueで使い分けることによって、繰り返し処理を終了したり途中でスキップしたりすることができますのでぜひ覚えておいて下さい。まとめ本記事ではjQueryのeachメソッドついてご紹介しました。jQueryオブジェクトに対する繰り返し処理を行うには$(...).each(処理内容)という形で実装するのでした。繰り返し処理を終了させたり、途中でスキップしたりするには、return文でfalse/trueを返すことで実現できました。$.eachを利用するのでした。今後、eachメソッドに関して迷うことがあれば、ぜひこの記事を思い出して下さいね。TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。桃太郎20代は役者、30代はエンジニア、そして40代を迎えた現在、Webライターとして活動しながら、3人の息子たちの家庭教育、アンチエイジングなどにも力を入れて日々ノマドライフを楽しんでいます。