jQueryでのeachメソッドとは？eachメソッドの使い方を紹介
目次
jQueryでのeachメソッドの使い方とは？
今回は、jQueryでのeachメソッドの使い方について説明します。eachメソッドを使用すれば、要素に対する繰り返し処理ができます。繰り返し処理のスキップ（continue）や、繰り返し処理を抜ける（break）方法についても紹介します。
jQueryでのeachメソッドの使い方に興味のある方はぜひご覧ください。
HTMLに対するeach
jQueryでの、HTML要素に対するeachメソッドの使い方を紹介します。ここでは、li要素に対してeachメソッドを使用してみます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<html> <head> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> </head> <body> <div> <ol> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ol> </div> </body> </html> |
jQueryは以下のように記述します。処理した要素が分かりやすいように、文字に色を付けています。
|
1 2 3 4 5 6 |
$(function(){ // li要素のeach処理 $('li').each(function(index, element){ $(element).css('color', 'Red'); }) }); |
実行結果は以下のようになります。
See the Pen
jquery_each1 by kskumd (@kskumd)
on CodePen.
このようにjQueryでは、HTML要素に対してeachメソッドで繰り返し処理ができます。
配列に対するeach
jQueryでの、配列に対するeachメソッドの使い方を紹介します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<html> <head> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> </head> <body> <div> <ol> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ol> <p id="sampleOutput"></p> </div> </body> </html> |
jQueryは以下のように記述します。
ここでは、id指定で配列の要素をappendしています。
|
1 2 3 4 5 6 7 8 9 |
$(function(){ // 配列の宣言 var array = ['item1 ', 'item2 ', 'item3']; // 配列に対するeach $.each(array, function(index, value){ jQuery('#sampleOutput').append(value).css('color', 'Red'); }) }); |
実行結果は以下のようになります。
See the Pen
jquery_each2 by kskumd (@kskumd)
on CodePen.
このようにjQueryでは、配列の要素に対してeachメソッドで繰り返し処理ができます。
continue
eachメソッドにおける繰り返し処理をスキップする方法を紹介します。continueに相当しますが、jQueryでは”return true”と記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<html> <head> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> </head> <body> <div> <ol> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ol> </div> </body> </html> |
jQueryは以下のように記述します。continueは記述できないので”return true”と記述します。
|
1 2 3 4 5 6 7 8 9 10 |
$(function(){ // li要素のeach処理 $('li').each(function(index, element){ if (index == 1) { // continue return true; } $(element).css('color', 'Red'); }) }); |
実行結果は以下のようになります。
See the Pen
jquery_each3 by kskumd (@kskumd)
on CodePen.
処理をスキップした要素は、文字に赤色がついていないことが確認できます。このように、繰り返し処理のスキップができます。
break
eachメソッドにおける繰り返し処理を抜ける方法を紹介します。breakに相当しますが、jQueryでは”return false”と記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<html> <head> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> </head> <body> <div> <ol> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ol> </div> </body> </html> |
jQueryは以下のように記述します。breakは記述できないので、”return false”と記述します。
|
1 2 3 4 5 6 7 8 9 10 |
$(function(){ // li要素のeach処理 $('li').each(function(index, element){ if (index == 1) { // break return false; } $(element).css('color', 'Red'); }) }); |
実行結果は以下のようになります。
See the Pen
jquery_each4 by kskumd (@kskumd)
on CodePen.
繰り返し処理を抜けた後の要素は、文字に赤色がついていないことが分かります。このように、繰り返し処理を抜けることができます。
jQueryでのeachメソッドを正しく使おう！
いかがでしたでしょうか。jQueryでのeachメソッドの使い方について説明しました。eachメソッドを使用すれば、要素に対する繰り返し処理ができます。
HTMLの要素や配列に対して、eachメソッドで繰り返し処理が行えます。繰り返し処理のスキップ（continue）や、繰り返し処理を抜ける（break）方法についても紹介しました。
ぜひご自身でソースコードを書いて、理解を深めてください。
