今回の記事は、
- jQueryを使って繰り返し処理を実装したい
- 2種類のeach()メソッドの違いが分からない
- 素のJavascriptでのやり方は知ってるけどjQueryでのやり方は知らない
という方に向けた記事になっています。
この記事の前半では「2種類のeach()メソッドを使って繰り返し処理を実装する方法」について解説しつつ、後半では「繰り返し処理を終了/スキップする方法」をご紹介させて頂きます。
なお、jQueryの機能や特徴については以下の記事にて詳しく解説していますので、こちらもぜひご覧ください。
今回の記事は、 jQueryを始めてみたいjQueryとJavascriptはどう違うの？そもそも、今からjQueryを始めるべき？ というお悩みを解消するための記事になっています。 この記事の前半では、「jQueryの[…]
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()メソッドでの繰り返し処理を終了/スキップする方法
for構文ですが、その中で繰り返し処理を終了/スキップするにはそれぞれbreakとcontinueを使用しますよね。他の言語でもよく見られるこのbreakとcontinueですが、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種類の使い方がごっちゃになってしまいがちですので、この機会にぜひマスターしておきましょうね。
このブログを通じて少しでも「傍（はた）を楽（らく）にする」ことができていれば嬉しく思います。
最後まで読んで頂きありがとうございました。
