お問い合わせHOME技術jQueryjQueryのeachで配列やオブジェクトをループするjQueryjQueryのeachで配列やオブジェクトをループするENGINEER.CLUB編集部2018/11/9TweetPocketどんな言語でも、繰り返し処理をする時はループを使うとプログラムが大変シンプルになります。jQueryのループ方法の一つ、eachの使い方をまとめました。jQueryのeachは2種類存在します。jQueryに用意されているeachと、jQueryオブジェクトとして用意されているeachです。使い方を見てみましょう。目次1.eachの使い方1-1.配列をループする1-2.オブジェクト(連想配列)をループする1-3.多次元配列をループする2.jQueryオブジェクト.eachの使い方3.ループの終了やスキップの注意点~breakとcontinue~3-1.ループを終了する3-2.ループをスキップする4.まとめ1.eachの使い方まずはjQueryに用意されているeachの使い方です。基本的な書き方は、以下になります。)collectionには繰り返し処理を行う配列やオブジェクトを指定します。indexにはインデックス番号やkey,valueには繰り返し処理中の値が入ります。1-1.配列をループする最も利用頻度が高い、配列をループするサンプルです。{console.log(value);})</script>このプログラムのコンソール出力結果は、以下になります。12345book1book2book3book4book5コールバック関数は引数を入れずに書くこともできます。その場合、値は「this」で指定します。thisにはオブジェクトが入るため、文字列と認識させるための工夫は必要です。this);})</script>1-2.オブジェクト(連想配列)をループする配列が連想配列(オブジェクト)に代わっても問題ありません。value);})</script>出力結果は以下になります。Programmming1-3.多次元配列をループする多次元配列もeachによってループ処理ができます。APIなどで取得したJSONを処理する場合にも使えます。val.theme);});</script>出力結果は以下になります。language2.jQueryオブジェクト.eachの使い方jQueryオブジェクトのeachは、以下のようにWebページ上に複数、同じ条件のオブジェクトが存在する場合にの処理に最適です。12345678<div><ul><li>HTML</li><li>CSS</li><li>JavaScript</li></ul></div>まずは基本的な書き方です。前項のjQuery.eachとはやや異なるので注意してください。)indexにはインデックス番号、Elementには参照中の要素が入ります。それでは、上記のHTMLに対してeachでループを回してみます。{console.log(index);console.log($(element).text());})リストの中身が表示されました。1234560HTML1CSS2JavaScriptコールバック関数の引数を省略した場合はこちらも「this」に参照中の要素が入ります。通常のJQueryオブジェクトと同様の書き方で、加工や属性の取り出しができます。{console.log($(this).text());})3.ループの終了やスキップの注意点~breakとcontinue~JQueryのeachには、他のプログラム言語に見られるような「break」や「continue」はありません。true」を使用します。false」の使い方から見てみましょう。{//4冊め以降は表示させないようにループを抜けます。false」の使い方です。true」の使い方はjQueryオブジェクト.eachでも同様です。4.まとめ以上、jQueryでのeachの使い方でした。引数にコールバック関数が入ったり、breakやcontinueが使えなかったりと、他のプログラム言語とやや勝手が違って難しいですね。入力チェックやJSONデータの処理など活躍の機会は多いので、ぜひ何も見ずに書けるようになりたいものです。私たちは、全てのエンジニアに市場価値を高め自身の望む理想のキャリアを歩んでいただきたいと考えています。今あなたが転職を検討しているのであればこちらの記事をご一読ください。理想のキャリアを実現するためのヒントが見つかるはずです。『技術力』と『人間力』を高め市場価値の高いエンジニアを目指しませんか?私たちは「技術力」だけでなく「人間力」の向上をもって遙かに高い水準の成果を出し、関わる全ての人々に感動を与え続ける集団でありたいと考えています。高い水準で仕事を進めていただくためにも、弊社では次のような環境を用意しています。ボールドでは「キャリア採用」のエントリーを受付中です。以下のボタンより弊社の紹介をご覧いただき、あなたの望むキャリアビジョンをエントリーフォームより詳しくお聞かせください。EngineerclubFacebookTwitterFeedlyコメントコメントをキャンセル次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。プログラミング言語とインフラでのインスタンスって?2020.01.15IT業界ヘルプデスクに転職したい。