jQueryの使い方を徹底解説!

jQueryのeachで配列やオブジェクトをループする

どんな言語でも、繰り返し処理をする時はループを使うとプログラムが大変シンプルになります。jQueryのループ方法の一つ、eachの使い方をまとめました。

jQueryのeach2種類存在します。jQueryに用意されているeachと、jQueryオブジェクトとして用意されているeachです。早速使い方を見てみましょう。

1.eachの使い方

まずはjQueryに用意されているeachの使い方です。

基本的な書き方は、以下になります。

$.each( collection, callback(index, value) )

collectionには繰り返し処理を行う配列やオブジェクトを指定します。

indexにはインデックス番号やkey,valueには繰り返し処理中の値が入ります。

1-1.配列をループする

最も利用頻度が高い、配列をループするサンプルです。

このプログラムのコンソール出力結果は、以下になります。

コールバック関数は引数を入れずに書くこともできます。その場合、値は「this」で指定します。

ただ、thisにはオブジェクトが入るため、文字列と認識させるための工夫は必要です。

1-2.オブジェクト(連想配列)をループする

配列が連想配列(オブジェクト)に代わっても問題ありません。

出力結果は以下になります。

1-3.多次元配列をループする

多次元配列もeachによってループ処理ができます。APIなどで取得したJSONを処理する場合にも使えます。

出力結果は以下になります。

2.jQueryオブジェクト.eachの使い方

jQueryオブジェクトのeachは、以下のようにWebページ上に複数、同じ条件のオブジェクトが存在する場合にの処理に最適です。

まずは基本的な書き方です。前項のjQuery.eachとはやや異なるので注意してください。

jQueryオブジェクト.each( function(index, Element) )

indexにはインデックス番号、Elementには参照中の要素が入ります。

それでは、上記のHTMLに対してeachでループを回してみます。

リストの中身が表示されました。

コールバック関数の引数を省略した場合はこちらも「this」に参照中の要素が入ります。

通常のJQueryオブジェクトと同様の書き方で、加工や属性の取り出しができます。

3.ループの終了やスキップの注意点~breakcontinue

JQueryのeachには、他のプログラム言語に見られるような「break」や「continue」はありません。

break」の代わりに「return false」、「continue」の代わりに「return true」を使用します。

3-1.ループを終了する

まずはループを抜けるための「return false」の使い方から見てみましょう。

3-2.ループをスキップする

次はループをスキップするための「return false」の使い方です。

尚、「return false」「return true」の使い方はjQueryオブジェクト.eachでも同様です。

4.まとめ

以上、jQueryでのeachの使い方でした。

引数にコールバック関数が入ったり、breakcontinueが使えなかったりと、他のプログラム言語とやや勝手が違って難しいですね。しかし、入力チェックやJSONデータの処理など活躍の機会は多いので、ぜひ何も見ずに書けるようになりたいものです。