【jQuery】繰り返し処理の実装方法【2種類のeach()メソッドを使い分けよう】

今回の記事は、

  • jQueryを使って繰り返し処理を実装したい
  • 2種類のeach()メソッドの違いが分からない
  • 素のJavascriptでのやり方は知ってるけどjQueryでのやり方は知らない

という方に向けた記事になっています。

この記事の前半では「2種類のeach()メソッドを使って繰り返し処理を実装する方法」について解説しつつ、後半では「繰り返し処理を終了/スキップする方法」をご紹介させて頂きます。

なお、jQueryの機能や特徴については以下の記事にて詳しく解説していますので、こちらもぜひご覧ください。

おすすめ記事

今回の記事は、 jQueryを始めてみたいjQueryとJavascriptはどう違うの?そもそも、今からjQueryを始めるべき? というお悩みを解消するための記事になっています。 この記事の前半では、「jQueryの[…]

jqueryロゴ

レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。

jQueryを使って繰り返し処理を実装する方法

jQueryを使って繰り返し処理を実装するにはeach()メソッドを使用します。

しかしこのeach()メソッドですが、同じ名前で2種類の使い方が存在するため、その使い分け方をしっかりと把握しておかないと、思わぬところで詰まってしまいがちです。

その2種類の内訳としては、「jQueryオブジェクト」に対して使用するeach()メソッドと、「配列や連想配列」に対して使用するeach()メソッドになります。

それぞれ具体例を交えながら解説させていただきますね。

jQueryオブジェクトに対して繰り返し処理を実装する方法

まずは、jQueryオブジェクトに対して繰り返し処理を実装する方法について解説していきます。

ここでいうjQueryオブジェクトとは、$()で囲われたオブジェクトのことを指し、基本的には以下の通り使用します。

基本的な使い方

$(セレクタ).each( function (idx, val) {
  // ここに繰り返し処理を記載します
})

上記の通り、関数に引数を渡すこともでき、この場合であれば、idxにはインデックスが代入され、valにはセレクタで取得した要素自体が代入されます。

文字面だけでは分かりにくいかと思いますので、実際の実装例を見ながら確認していきましょう。

実装コード

<p class="test-text1">テストテキスト1</p>
<p class="test-text1">テストテキスト2</p>
<p class="test-text1">テストテキスト3</p>

<button onClick="each1()">繰り返し処理を実行</button>

<script>
function each1() {
  $(".test-text1").each(function(idx, val) {
    console.log(idx)
    console.log($(val).text())
  })
}
</script>

出力結果

0
テストテキスト1
1
テストテキスト2
2
テストテキスト3

動作確認用

テストテキスト1

テストテキスト2

テストテキスト3

上記のボタンを押していただくと、ディベロッパーツールのconsole画面に上記と同じ結果が出力されているのがお分かりいただけるかと思います。

また、このeach()メソッドは引数を省略することもでき、その場合には$(this)を使うことで要素を取得することができます。

実装コード

<p class="test-text2">テストテキスト1</p>
<p class="test-text2">テストテキスト2</p>
<p class="test-text2">テストテキスト3</p>

<button onClick="each2()">繰り返し処理を実行</button>

<script>
function each2() {
  $(".test-text1").each(function(idx) {
    console.log(idx)
    console.log($(this).text())
  })
}
</script>

出力結果

0
テストテキスト1
1
テストテキスト2
2
テストテキスト3

動作確認用

テストテキスト1

テストテキスト2

テストテキスト3

上記を実行してみると、先ほどと同様の結果が出力されているのがお分かりいいただけるかと思います。

また、インデックス番号を取得するために引数にidxを指定していますが、不要であればこちらも省略して問題ありません

配列や連想配列に対して繰り返し処理を実装する方法

続いては、配列や連想配列に対して繰り返し処理を実装する方法をご紹介していきます。

先ほどのeach()メソッドとは使い方が少し異なり、jQuery自体をレシーバに取り、第1引数に配列や連想配列を指定します。

基本的な使い方

$.each(object, function(idx, val) {
  // ここに繰り返し処理を記載します
})

早速実際の実装例を見ながら確認していきましょう。

実装コード

<button onClick="each3()">繰り返し処理を実行</button>

<script>
function each3() {
  const array1 = ["テストテキスト1", "テストテキスト2", "テストテキスト3"]

  $.each(array1, function(idx, val) {
    console.log(idx)
    console.log(val)
  })
}
</script>

出力結果

0
テストテキスト1
1
テストテキスト2
2
テストテキスト3

動作確認用

  

このようにして配列や連想配列に対して繰り返し処理を実行することができます。

配列の場合には、第1引数にはインデックス番号第2引数には実際の値が代入され、連想配列に対して使用した場合には、第1引数にはキー(key第2引数にはバリュー(valueが代入されます。

なお、先ほどとは違い、引数を省略して$(this)などでアクセスすると、エラーは発生しませんが、想定とは異なる値が返ってきますので、基本的には引数は省略しないようにしましょう

each()メソッドでの繰り返し処理を終了/スキップする方法

素のJavascriptで繰り返し処理を行う際によく使用されるfor構文ですが、その中で繰り返し処理を終了/スキップするにはそれぞれbreakcontinueを使用しますよね。

他の言語でもよく見られるこのbreakcontinueですが、jQueryのeach()メソッドでは使用できないため注意が必要です。

とはいえ、使い方自体は非常に簡単ですので、ぜひともこの機会に覚えておいてくださいね。

each()メソッドでの繰り返し処理を終了する方法

each()メソッドの途中で繰り返し処理を終了するには、終了させたい箇所でreturn falseを記載します。

先ほどの例を使って、「テストテキスト2」という文字が現れたらそこで繰り返し処理を終了するプログラムを実装してみます。

実装コード

<button onClick="each4()">繰り返し処理を実行</button>

<script>
function each4() {
  const array2 = ["テストテキスト1", "テストテキスト2", "テストテキスト3"]

  $.each(array2, function(idx, val) {
    console.log(idx)
    console.log(val)
    if (val == "テストテキスト2") { return false }
  })
}
</script>

出力結果

0
テストテキスト1
1
テストテキスト2

動作確認用

  

ディベロッパーツールのconsole画面を見ていただくと、本来表示されていた「2」と「テストテキスト3」が表示されていない(「テストテキスト2」が現れた時点で繰り返し処理が終了している)ことがお分かりいただけるかと思います。

each()メソッドでの繰り返し処理をスキップする方法

each()メソッドの中で繰り返し処理をスキップするには、スキップしたい箇所でreturnを記載します。

今度は、「テストテキスト2」という文字が現れたらその処理をスキップするプログラムを実装してみます。

実装コード

<button onClick="each5()">繰り返し処理を実行</button>

<script>
function each5() {
  const array3 = ["テストテキスト1", "テストテキスト2", "テストテキスト3"]

  $.each(array3, function(idx, val) {
    if (val == "テストテキスト2") { return }
    console.log(idx)
    console.log(val)
  })
}
</script>

出力結果

0
テストテキスト1
2
テストテキスト3

動作確認用

  

ディベロッパーツールのconsole画面を見ていただくと、本来表示されていた「1」と「テストテキスト2」が表示されていない(「テストテキスト2」が現れた時点でその処理をスキップしている)ことがお分かりいただけるかと思います。

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

さて、ここまで、jQueryを使って繰り返し処理を実装する方法について解説してきましたがいかがでしたか?

実際の開発でも必ずと言ってよいほど使用頻度の高い構文ですが、2種類の使い方がごっちゃになってしまいがちですので、この機会にぜひマスターしておきましょうね。

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。