jQueryのeachメソッドの使い方

2020年06月10日

フロントエンド

jQueryでは複数の要素に対して繰り返し処理を行う場合にeach()を使うことができます。そのeach()を使いこなしたていきたいので今回しっかりまとめていきます!

eachメソッドって何?

そもそもeachメソッドって何なのかについてです。

eachメソッドとは、HTML要素や配列、オブジェクトに対して繰り返し処理ができるメソッドになります。JavaScriptで言うところのforやfor…inですね。

eachメソッドの書き方

さっそくeachメソッドの書き方についてまとめていきます!

HTML要素に対しての書き方

HTML要素に対して繰り返し処理を実行するときの書き方からまとめていきます。基本的な書き方は下記のようになります。

対象のHTML要素.each(function(index, element) {

繰り返したい処理を記述する

})

eachに指定できる引数の「index」はインデックス番号、「element」はHTML要素を取得できます。

配列とオブジェクトに対しての書き方

次に、配列とオブジェクトに対しての書き方をまとめていきます。先ほどのHTML要素のときとは少し書き方が変わるので注意です。

$.each( 対象の 配列またはオブジェクト, function(index, value) {

繰り返したい処理を記述する

})

先ほどとは違い、最初に対象の要素の代わりに「$」が代わりに必要になります。そして最初に、対象の配列、オブジェクトを指定します。そのあとにある「index」はインデックス番号、「value」は配列やオブジェクトの値を取得できます。

まとめ

今回は、eachメソッドについてまとめていきました。授業などでも繰り返し処理をすることは多いですので、eachメソッドをこの機会にちゃんと覚えきってしっかり使いこなせるようになりたいと思います。

Pocket

related

Markdown記法備忘録

前回の記事でHexoを使ってサイトを制作しましたが、そのサイトの記事を書いていくには、Markdown記法を使う必要があります。いつもWordPressのGUIで記事を更新している私にとってはあまり馴

フロントエンド

2020.09.13

JavaScriptのデータ型について

JavaScriptのオブジェクトについて勉強していくとデータ型について出てきたので一度ブログにまとめて整理していこうと思います。 データ型 データ型は大きく分けると、プリミティブ型(基本形)とオブジ

フロントエンド

2020.09.22

フォーム作成の備忘録

今回は、HTMLとCSSでは結構難しい分類にはいるフォームのコーディングを自分の復習がてらまとめていこうと思います。フォームの表示がちゃんとできるようにということをまとめていくので実際に入力された内容

フロントエンド

2020.03.31

jQueryの基礎

今回は、JavaScriptのライブラリのjQueryの基礎部分をまとめていこうと思います。最近ではjQueryは微妙と聞くこともありますが個人的には素のJSよりも触ってみて扱いやすかったので勉強のた

フロントエンド

2020.04.09

profile

kobayashi kent

トライデントコンピューター専門学校Webデザイン学科
アニメとかゲームとか音楽聴くのが好き