jQueryを使った際の、for文の説明と使い方をご紹介します。

for文とは？

for文は簡単に言うと、
「指定した回数分、処理を行う」ものです。

同じ処理を3回繰り返したい、などの動作を容易に行うことができます。

早速、実装例を見ながら理解していきましょう。

for文で要素「<p>」を追加していく

まずは以下のコードをご覧ください。

ここでは、<p>に囲われたたまごを3つ、ループして表示しています。
//のコメントアウト部分で説明していますが、まず初めに変数を定義。

次に条件となる数式を入力、最後に繰り返した際の追加処理を設定します。

1. 変数「i」は最初0
2. 一回目の処理が終わると、変数「i」に1が加算される。
3. 二回目の処理が終わると、変数「i」は2になる。
4. 三回目の処理が終わって、変数「i」は3になる。
5. 変数「i」が3になることで、処理がここで終了する。

というような流れになります。

条件となる数式を3にすることで3回ループして、<p>が3回、

<div id=”cont01″>の中に吐き出されます。

数式の数値を変更することで、処理の回数を増減することができます。

for文で連番の画像を表示する。

次に少し応用したやり方をしてみましょう。

今回、変数「i」の初期値を1にしています。

前述の指定では、0→1→2→3となりますので、最初の<img>のsrc指定が「img0.jpg」となってしまいます。

あらかじめ画像を作成するときにimg0.jpg、img1.jpgのように作成していればよいですが、

それではややこしくなってしまうので、最初の<img>のsrc指定がimg1.jpgになるように、

初めの指定を変えています。

1. 変数「i」は最初1
2. 一回目の処理でimg1.jpgを表示、変数「i」に1を加算して2になる。
3. 二回目の処理でimg2.jpgを表示、変数「i」に1を加算して3になる。
4. 三回目の処理でimg3.jpgを表示、変数「i」に1を加算して4になる。
5. 変数「i」が4になり、処理が終了。

というループの流れになります。

for文で指定した要素の数だけループする

次はさらに応用したものを見てみましょう。

今回は、<span>のappleというクラスのついたものの数をまず数えて、その数分のループ処理を行います。

クラスappleのついた<span>は合計で5個なので、変数「apple」には5が入ります。

つまり5回ループ処理を行うということになります。

しかし、ここで気を付けなければいけないのは、そのままループしてしまうと、

「りんご0個目、りんご1個目」と、おかしな表示になってしまいます。

前述の画像を表示させたときのように、iを1に設定すればいいのですが、別の方法として、

「var num = i +1;」と、毎回1の数字に1を追加したものを表示するという方法があります。

この例では、iが0だった場合には1となり、1だった場合には2となります。

その為、最初のリンゴは1個目となり、自然な表示とすることができます。

1. あらかじめ、変数「apple」に、クラスappleのついた<span>の数を入れる（5）
2. 変数「i」は最初0に設定
3. ループ処理内で、変数「num」に変数「i」の数に加え、1を加算する。
4. 変数「num」が1になり、表示は「りんご1個目」に、変数「i」に1を加算して1になる。
5. 変数「num」が2になり、表示は「りんご2個目」に、変数「i」に1を加算して2になる。
6. 変数「num」が3になり、表示は「りんご3個目」に、変数「i」に1を加算して3になる。
7. 変数「num」が4になり、表示は「りんご4個目」に、変数「i」に1を加算して4になる。
8. 変数「num」が5になり、表示は「りんご5個目」に、変数「i」に1を加算して5になる。
9. 変数「i」が5になり、処理が終了。

少しわかりづらいかもしれませんが、このような内容になります。

for文を使うと繰り返し処理が楽になり、非常に便利

いかがでしたでしょうか。

少しちんぷんかんぷんになってしまうような部分もあるかもしれません。（僕が最初そうでした。）

一見するとめんどくさくてわかりづらいから、html直書きでいいや！

とも思ってしまうのですが、for文を使うことで、色々な表現をすることもできますし、

極めれば、jQueryのプラグインを自作することも可能です。（for文のみではありませんが。。）

ぜひ、for文の便利さを体感していただき、

jQueryも使いこなしてもらえれば、と思います。