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

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

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

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

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

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

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

Jqueryの「」は他言語の「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カ所にまとめるとメンテナンスの手間を減らすことができます。

今回のレポートは以上です。
読んでいただいてありがとうございました。


ホームページに関するお悩み事やご相談事がございましたら私どもまでご連絡ください。 鋭意ご対応申し上げます。
ホームページのご提案もさせていただいております