kokeblog

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

    関連記事

    jQueryの基礎

    フォーム作成の備忘録

    jQueryのanimate関数について

    CSSアニメーションの基礎

    カテゴリー