Jqueryのeachでループ処理を行う

2020年5月19日

最近のホームページはJqueryを使った装飾処理が増えてきました。
先日も装飾処理を制作していた時に、同じ記述を3回記述していることにきづきました。

なにか無駄だなと思い、一つにまとめる方法がないか模索しました。
PHPならばループ処理で一つにまとめることができます。
でもJqueryにはさすがにループ処理はないだろう・・と思っていました。

ところが調べてみたら、Jqueryにもループ処理があることがわかりました。

今回はeachを使って、queryでループする方法について記述いたします。

eachを使ったループ処理のやり方

PHP等の言語を知っておられる方ならば「foreach」ループを知っておられるかと思います。

Jqueryの「each」は他言語の「foreach」と同じです。
配列等の要素の数だけループします。

each処理の具体例

each処理のサンプルを用意いたしました。
こちらを見ていただければ幸いです。

<li>タグの数だけループし、<li></li>の中身を読み取っています。
ソースはこちらです。
コピーしてHTMLに張り付けしていただければ、そのままでも動作します。

eachの文法解説

---

■文法
$.each(①ループ要素, function(②ループカウンタ, ③個別要素)
{
});

■具体的な記述例
$.each($(“.box ul li”), function(count, value_data)
{
});

---

①ループ要素

ループしたい配列を記述します。
他言語では主に配列を記述しますが、Jqueryの場合だと「タグ」でもOKです。
つまり、特定タグの要素数だけループします。

例えばサンプルは.boxクラスの<li>タグの数だけループします。
<li>タグ以外に<p>タグ<div>タグといったものでもループできます。

②ループカウンタ

何回目のループであるかの数字が入ります。
1回目ならば「0」、10回目ならば「9」が入ります。
Jqueryの場合は、これらの要素がサブルーチンの引数として渡されます。
それが解りにくい感を出していますが、意味が分かれば大丈夫です。

③個別要素

①のループ要素から分解された1行のデータが渡されます。
例えばサンプル例であれば1回目のループ時にはvalue_data変数に「<li>富山県</li>」が渡されます。2回目のループ時には「<li>石川県</li>」が値として入ります。

配列要素のループも可能です

タグ要素でのループのやり方はわかりました。
でも私が実際にやりたかったのは「配列によるループ」です。

Javascriptにも一応配列指定方法があります。
配列の数だけループをしたいと考えました。

どうやればできるのでしょう?
調べました。

each配列要素の具体例

配列をループするeachサンプルを用意しました。
こちらをご覧いただければ幸いです。

配列の数だけループし、県名を出力します。
ソースコードはこちらになります。（スクリプト部分のみ）

違いはループ要素のみ

最初のサンプルとほぼ同じですが、違いは「①ループ要素」です。
最初のサンプルでは 「$(“.box ul li”) 」でしたが、今回は配列名「prefecture 」を指定しています。

タグ要素の場合は「$()」で記述しますが、配列要素の場合は「$()」がいりません。

あとは同じです。

Jqueryのループ方法はいろいろあります

Jqueryでのループ方法は、eachのほかにforもあります。
必要に応じて使いやすい方でよいと思います。

またeachの記述方法についてですが、以下のような記述もできます。

---

$( ①ループ要素 ).each( function(②ループカウンタ, ③個別要素)
{
});

---

①のループ要素を文頭に記述するやり方もあります。
Jqueryは文頭に要素名を記述する方法が一般的です。

ただ私はeachに関して、最初理解できませんでした。
それは命令文（each）の外側に①ループ要素を記述している点です。

プログラマー気質から、他の言語と類似性のある記述のほうがわかりやすいため、eachの後ろに①ループ要素を記述するようにしています。

同じ処理はループで一つにまとめたほうが不具合が出にくくなります

　プログラムで同じ処理の記述を複数回書くということは、メンテナンスの手間が増えるということです。

どういうことかというと、その部分に不具合があり修正が必要となった場合、複数個所に同じ修正を入れなければならなくなるためです。

過去に作ったプログラムは、どのように作ったか忘れているものです。
それでいて複数個所修正があると、修正漏れが出る可能性が高くなります。

事実、私もプログラマー駆け出しのころ、同じ処理を複数個所に記述してしまい、不具合修正で修正漏れが発生し問題になったことがあります。

ただ、急を要する場合など「修正時間が限られている場合」はループ処理にこだわる必要はありません。後日時間のある時にゆっくり修正すればよいのです。

このように、ループ処理を活用して、同じ処理の記述を1カ所にまとめるとメンテナンスの手間を減らすことができます。