.net column

.NET開発者のためのブログメディア
開発環境

jQueryでのeachメソッドとは?eachメソッドの使い方を紹介

2020年12月22日

SE
jQueryでのeachメソッドを使用すると、どのような処理ができるのでしょうか。
PM
eachメソッドを使用すれば、要素に対する繰り返し処理ができます。

jQueryでのeachメソッドの使い方とは?


今回は、jQueryでのeachメソッドの使い方について説明します。eachメソッドを使用すれば、要素に対する繰り返し処理ができます。繰り返し処理のスキップ(continue)や、繰り返し処理を抜ける(break)方法についても紹介します。

jQueryでのeachメソッドの使い方に興味のある方はぜひご覧ください。

HTMLに対するeach

jQueryでの、HTML要素に対するeachメソッドの使い方を紹介します。ここでは、li要素に対してeachメソッドを使用してみます。

 

jQueryは以下のように記述します。処理した要素が分かりやすいように、文字に色を付けています。

 

実行結果は以下のようになります。

See the Pen
jquery_each1
by kskumd (@kskumd)
on CodePen.


このようにjQueryでは、HTML要素に対してeachメソッドで繰り返し処理ができます。

配列に対するeach

jQueryでの、配列に対するeachメソッドの使い方を紹介します。

 

jQueryは以下のように記述します。
ここでは、id指定で配列の要素をappendしています。

 

実行結果は以下のようになります。

See the Pen
jquery_each2
by kskumd (@kskumd)
on CodePen.


このようにjQueryでは、配列の要素に対してeachメソッドで繰り返し処理ができます。

continue

eachメソッドにおける繰り返し処理をスキップする方法を紹介します。continueに相当しますが、jQueryでは”return true”と記述します。

 

jQueryは以下のように記述します。continueは記述できないので”return true”と記述します。

 

実行結果は以下のようになります。

See the Pen
jquery_each3
by kskumd (@kskumd)
on CodePen.


処理をスキップした要素は、文字に赤色がついていないことが確認できます。このように、繰り返し処理のスキップができます。

break

eachメソッドにおける繰り返し処理を抜ける方法を紹介します。breakに相当しますが、jQueryでは”return false”と記述します。

 

jQueryは以下のように記述します。breakは記述できないので、”return false”と記述します。

 

実行結果は以下のようになります。

See the Pen
jquery_each4
by kskumd (@kskumd)
on CodePen.


繰り返し処理を抜けた後の要素は、文字に赤色がついていないことが分かります。このように、繰り返し処理を抜けることができます。

SE
jQueryでのeachメソッドの使い方がよく理解できました。
PM
使い方が理解できたら、実践でeachメソッド使用して繰り返し処理を行ってみましょう。

jQueryでのeachメソッドを正しく使おう!

いかがでしたでしょうか。jQueryでのeachメソッドの使い方について説明しました。eachメソッドを使用すれば、要素に対する繰り返し処理ができます。

HTMLの要素や配列に対して、eachメソッドで繰り返し処理が行えます。繰り返し処理のスキップ(continue)や、繰り返し処理を抜ける(break)方法についても紹介しました。

ぜひご自身でソースコードを書いて、理解を深めてください。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

求人一覧

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)