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

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

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

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

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

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

 

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

 

eachメソッドの書き方

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

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

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

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

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

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

 

20160620

 

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

 

20163020-2

 

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

 

20160620

 

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

 

20163020-2

 

その通り!実際に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] プログラミングで挫折しない学習方法を動画で公開中

まとめ

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

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

 

20160620

 

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

 

20163020-2

 

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

 

20160620

 

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

 

20163020-2

 

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

 

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