【jQuery】each()を使って繰り返し処理を行う!

繰り返し処理を行うにはjQueryのeach()メソッドを使用します。

jQueryのeach()とは一致する要素に対して、指定した関数を実行するメソッドであり、指定した要素があるなら繰り返して処理を行うことができます。

each()メソッドは、パラメータである関数を指定して繰り返し処理を行いますが、関数にはeach()内で作成した無名の関数やjsファイル内で定義した名前がついている関数を指定することができます。

また、each()のパラメータにjQueryオブジェクトを指定することで、要素だけでなく、配列やJSON、クラス属性などを指定して繰り返し処理を行うこともできます。

今回は、jQueryのeach()メソッドを使って繰り返し処理を行う方法について以下の内容で解説していきます。

⚫︎ 無名関数を指定して繰り返し処理を行う場合
⚫︎ 関数名を指定して繰り返し処理を行う場合

⚫︎ 配列(array)を繰り返し処理させる方法
⚫︎ JSONを繰り返し処理させる方法
⚫︎ classを繰り返し処理させる方法

ハルトさん

今回はjQueryのeach()メソッドで要素の繰り返し処理を行う方法について説明していきます。

さとみさん

はい!
お願いします!

each()とは

each()とは指定した要素に対して、指定した関数を実行するメソッドになります。
その為、一致する要素が複数ある場合は全て関数が実行されるようになります。

each()の書き方

each()の書き方は下記となります。

each()メソッドを呼び出すことで、$の()で指定したセレクタの繰り返し処理を行うことができます。

パラメータ

⚫︎ jQueryオブジェクト:
対象にしたい繰り返し処理をjQueryオブジェクトで指定する
⚫︎ 関数:
一致した要素に実行したい関数を指定する

繰り返し処理を行うサンプルコード

要素の繰り返し処理を行うサンプルコードを紹介します。

無名関数を指定して繰り返し処理を行う場合

sample.html

style.css

index.js

出力結果

each()メソッドのパラメータに無名関数を指定することで、繰り返し処理を行うことができます。
そのため、ボタンを押すと、インデックスがアラートで表示され、divsクラス要素の背景色が変化します。

さとみさん

each()メソッドで、セレクタに一致している要素に処理が実行されていますね!

ハルトさん

そうですね。
each()メソッドのパラメータに関数を指定することで、指定した要素に繰り返し処理が行われます。
また、関数の第1引数は要素のインデックス(0からスタート)、第2引数は要素名となります。

関数名を指定して繰り返し処理を行う場合

関数名を指定して繰り返し処理を行う場合を見てみます。

sample.html

style.css

index.js

出力結果

each()メソッドのパラメータに関数名を指定することで、繰り返し処理を行うことができます。
そのため、ボタンを押すと、インデックスがアラートで表示され、divsクラス要素の背景色が変化します。

さとみさん

each()メソッドに関数名を指定しても繰り返し処理を実行できるのですね!

ハルトさん

そうですね。
jsファイル内で定義している関数名をeach()メソッドのパラメータにそのまま指定することもできます。
関数を先に作って名前のみを指定すればよいので、ネストになったりや括弧が多くなったりした時には便利ですね。

配列(array)を繰り返し処理させる方法

jQuery内で作成した配列(array)の繰り返し処理を行ってみます。

配列の繰り返し処理を行うにはeach()のパラメータであるオブジェクトに配列名を指定します。

sample.html

index.js

出力結果

JSONを繰り返し処理させる方法

jQuery内で作成したJSONの繰り返し処理を行ってみます。

JSONの繰り返し処理を行うにはeach()のパラメータであるオブジェクトにJSON名を指定します。

sample.html

index.js

出力結果

class属性を繰り返し処理させる方法

class属性の繰り返し処理を行ってみます。

class属性の繰り返し処理を行うにはeach()のパラメータであるオブジェクトにクラス名を指定します。

sample.html

index.js

出力結果

今回のポイント

each()で繰り返し処理を実行

⚫︎ 指定した要素の繰り返し処理を行うにはjQueryのeach()メソッドを使用する

⚫︎ each()メソッドのパラメータである関数は無名関数や関数名を指定する

⚫︎ 配列の繰り返し処理を行うにはeach()のパラメータであるオブジェクトに配列名を指定する

⚫︎ JSONの繰り返し処理を行うにはeach()のパラメータであるオブジェクトにJSON名を指定する

⚫︎ class属性の繰り返し処理を行うにはeach()のパラメータであるオブジェクトにクラス名を指定する

関連記事

jQueryのfilter()メソッドで要素をフィルタリングする方法についてはこちらをご参考ください

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

SNSアカウントはこちらから

 

フリーランスの案件探し