jQueryでeachメソッドを使って繰り返し処理をする方法【初心者向け】

プログラミング初心者向けに、jQueryでeachメソッドを使った繰り返し処理の使い方について解説しています。eachメソッドの書き方を説明し、実際にアラートを繰り返し表示するコードを書いているので、ぜひご覧ください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

どのプログラミング言語にも繰り返し処理を実装するためのメソッドは必ず存在しています。jQueryにももちろん存在し、eachというメソッドで実装することができます。

今回は、JavaScriptのライブラリであるjQueryのeachメソッドについて解説していきたいと思います。

jQueryについてそもそもよく分からないという方は、jQueryとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

eachメソッドの書き方

jQueryメソッドの基本形は以下です。

$.each(オブジェクト, 処理)

ループを回すためのオブジェクトを第一引数に、処理を第二引数に書きます。

 

html要素に対してeachを使用する例

ここでは、htmlで表示された文字が、クリックするたびに赤色か黒色に交互に変化する例を紹介します。

例えば次のようなhtmlの要素が存在すると仮定します。

<div>クリックすると赤色か黒色に交互に変化する</div>

このdivで囲まれた部分に対し次のコードをJavaScripで用意します。

$(document.body).click(function () {
  $("div").each(function (i) {
    if (this.style.color != "red") {
      this.style.color = "red";
    } else {
      this.style.color = "";
    }
  });
});

 

eachを利用して繰り返し処理を行っています。

1行目のclick処理に関しては、 クリック時の処理! を参考にして頂くと良いですよ。

色の指定補法に関しては cssの基本的な書き方 もご覧ください。

 

配列に対してeachを使用する例

例えば配列に対してループを回したい時は以下のように書きます。

var array = [ “1”, “2”, “3”, “4”, “5” ];
  $.each(array, function(){
});

この場合arrayの各要素に対して、function内の処理を行います。

 

大石ゆかり

jQueryにも繰り返し文があるんですねー。

田島悠介

そうそう。jQueryで取得した要素の数って何個かわからない場合もあるし、要素オブジェクトもjQueryで取得しているから、jQueryのeachメソッドで処理したほうがいいんだよ。

大石ゆかり

処理には関数を書けばいいんですね?

田島悠介

その通り!実際にeachメソッドを書いてみよう!

 

実際に書いてみよう

今回はeachメソッドを利用して、ボタンを押すと文字のスタイルが変わるという実装を行ってみます。

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    <script>
      var array = [ "one", "two", "three" ];
      $("button").click(function() {
        $.each(array, function(){
          alert(this);
        });
      });
    </script>
  </head>
  <body>
    <button>3回アラートを出す</button>
  </body>
</html>

コードの解説をしていきます。

まず配列を定義します。今回はarrayという名前の中身が”one”,”two”,”three”の配列です。

var array = [ "one", "two", "three" ];

配列の各要素に対して、functionの中身を実行します。

thisにはレシーバ(今呼ばれている値)が入るので配列の各要素が表示されているアラートが三回出力される結果になります。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

まとめ

今回はeachメソッドについて解説していきました。配列に対してeachメソッドを実行するコードを書いていきましたが、配列の他にもhtml内のli要素などでも使用することが出来ます。

使いこなすことができればコードが読みやすくなるでしょう。

 

大石ゆかり

$.each()って見慣れない形ですね。

田島悠介

この場合、jQueryが持っているeachメソッドって意味になるんだ。

大石ゆかり

サンプルには引数が無かったのですが、取れますか?

田島悠介

function(index, value)とすると、最初に書いた引数にインデックスが、valueに値が自動で代入されるよ。

 

[お知らせ]TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。jQueryを使ってリッチなWebサービスを作りたい方はぜひご覧ください。

この記事を監修してくれた方

中本賢吾(なかもとけんご)
アジマッチ有限会社 代表取締役社長

開発実績:PHPフレームワークを利用した会員制SNS・ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用したシステム開発、店舗検索スマホアプリ開発など。

その他にも地域の職業プログラマー育成活動を行い、2018年には小学生がUnityで開発したオリジナルAndroidアプリをGooglePlayでリリース。ゲームで遊ぶより作ろうぜ!を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。