jQueryのeachとは?配列やオブジェクトをループするeachの使い方
どんな言語でも、繰り返し処理をする時はループを使うとプログラムが大変シンプルになります。jQueryのループ方法の一つ、eachの使い方をまとめました。
jQueryのeachは2種類存在します。jQueryに用意されているeachと、jQueryオブジェクトとして用意されているeachです。早速使い方を見てみましょう。
目次
1.eachの使い方
まずはjQueryに用意されているeachの使い方です。
基本的な書き方は、以下になります。
$.each( collection, callback(index, value) )
collectionには繰り返し処理を行う配列やオブジェクトを指定します。
indexにはインデックス番号やkey,valueには繰り返し処理中の値が入ります。
1-1.配列をループする
最も利用頻度が高い、配列をループするサンプルです。
<script> //ループ対象の配列 var array = ['book1', 'book2', 'book3', 'book4', 'book5']; $.each(array, function(index, value) { console.log(value); }) </script>
このプログラムのコンソール出力結果は、以下になります。
book1 book2 book3 book4 book5
コールバック関数は引数を入れずに書くこともできます。その場合、値は「this」で指定します。
ただ、thisにはオブジェクトが入るため、文字列と認識させるための工夫は必要です。
<script> //ループ対象の配列 var array = ['book1', 'book2', 'book3', 'book4', 'book5']; $.each(array, function() { //※文字列と結合し、String型と認識させる console.log("名称:" + this); }) </script>
1-2.オブジェクト(連想配列)をループする
配列が連想配列(オブジェクト)に代わっても問題ありません。
<script> //ループ対象の配列 obj = { name: 'book1', price: 10000, theme: 'Programmming' }; $.each(obj, function(index, value) { console.log(index + ': ' + value); }) </script>
出力結果は以下になります。
name: book1 price: 10000 theme: Programmming
1-3.多次元配列をループする
多次元配列もeachによってループ処理ができます。APIなどで取得したJSONを処理する場合にも使えます。
<script> // 処理対象のオブジェクト配列 var books = [ { name: 'book1', price: 10000, theme: 'programming' }, { name: 'book2', price: 5000, theme: 'art' }, { name: 'book3', price: 7500, theme: 'science' }, { name: 'book4', price: 12000, theme: 'mathmatical' }, { name: 'book5', price: 3000, theme: 'language' } ]; // 配列booksを順に処理 $.each(books, function(index, val) { console.log('名称:' + val.name + ' 値段:' + val.price + ' ジャンル:' + val.theme); } ); </script>
出力結果は以下になります。
名称: book1 値段: 10000 ジャンル: programmming 名称: book2 値段: 5000ジャンル: art 名称: book3 値段: 7500ジャンル: science 名称: book4 値段: 12000ジャンル: mathmatical 名称: book5 値段: 3000ジャンル: language
2.jQueryオブジェクト.eachの使い方
jQueryオブジェクトのeachは、以下のようにWebページ上に複数、同じ条件のオブジェクトが存在する場合にの処理に最適です。
<div> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </div>
まずは基本的な書き方です。前項のjQuery.eachとはやや異なるので注意してください。
jQueryオブジェクト.each( function(index, Element) )
indexにはインデックス番号、Elementには参照中の要素が入ります。
それでは、上記のHTMLに対してeachでループを回してみます。
$('li').each(function(index, element) { console.log(index); console.log($(element).text()); })
リストの中身が表示されました。
0 HTML 1 CSS 2 JavaScript
コールバック関数の引数を省略した場合はこちらも「this」に参照中の要素が入ります。
通常のJQueryオブジェクトと同様の書き方で、加工や属性の取り出しができます。
$('li').each(function() { console.log($(this).text()); })
3.ループの終了やスキップの注意点~breakとcontinue~
JQueryのeachには、他のプログラム言語に見られるような「break」や「continue」はありません。
「break」の代わりに「return false」、「continue」の代わりに「return true」を使用します。
3-1.ループを終了する
まずはループを抜けるための「return false」の使い方から見てみましょう。
//処理対象の配列 var array = ['book1', 'book2', 'book3', 'book4', 'book5']; $.each(array, function(index, value) { //4冊め以降は表示させないようにループを抜けます。 if(index === 3) { return false; } console.log(value); })
3-2.ループをスキップする
次はループをスキップするための「return false」の使い方です。
//処理対象の配列 var array = ['book1', 'book2', 'book3', 'book4', 'book5']; $.each(array, function(index, value) { //4冊目だけ表示させません if(index === 3) { return true; } console.log(value); })
尚、「return false」「return true」の使い方はjQueryオブジェクト.eachでも同様です。
4.まとめ
以上、jQueryでのeachの使い方でした。
引数にコールバック関数が入ったり、breakやcontinueが使えなかったりと、他のプログラム言語とやや勝手が違って難しいですね。しかし、入力チェックやJSONデータの処理など活躍の機会は多いので、ぜひ何も見ずに書けるようになりたいものです。
コメント