jQueryのeach関数の使い方

2024年5月26日

当ページのリンクには広告が含まれています。

URLをコピーしました！

生徒

jQueryで複数の要素に対して同じ処理をしたいです

先生

jQueryのeach関数の使い方を説明します

この記事でわかること

jQueryの2つのeach関数の使い方

WEBページに動きをつけるにはjQueryが便利

WEBページの要素の内容を動的に変えたり、動きを付けたりするにはJavaScriptが必要になってきます。

WEBページでJavaScriptの処理を書くには、jQueryを利用するのが便利です。

jQueryは、ReactやVue.jsに比べて古くて劣ると言われてきていますが、WEBページで使う分にはjQueryが手軽で便利だと思います。

jQueryに付いて

jQueryは最も多く利用されていると言われているJavaScriptのライブラリです。

jQueryを使用すると、少ない記述でWEBページの要素を扱うことができます。

素のJavaScriptも機能拡張されてきて、jQueryと同じことをできるようになってきていますが、jQueryの方が簡単に書くことができます。

jQueryで使うeach関数に付いて

jQueryで、指定したオブジェクトや配列の各要素に対して、ループ処理を行うにはeach関数を使用します。

each関数には以下の2種類があります。

jQueryオブジェクトのeach関数
jQueryのeach関数

この2つのeach関数の大きな違いは、jQueryオブジェクト以外（JavaScriptの配列やハッシュ）でも使えるかどうかです。

jQueryオブジェクトのeach関数

jQueryオブジェクトのeach関数について

jQueryオブジェクトのeach関数は、jQueryオブジェクトが指す各要素に対するループ処理が行えます。

WEBページからDOMエレメントを取得する

WEBページは、JavaScriptやCSSからHTMLの要素を扱えるように、DOM（Document Object Model）という仕組みでデータを持っています。

DOMを利用して取得した要素を、DOMエレメントといいます。

DOMについては、別の記事でより詳しく説明しています。

DOMエレメントをjQueryオブジェクトに変換する

jQueryで、DOMエレメントをjQueryオブジェクトに変換するには$(DOMエレメント)と書きます。

jQuery(DOMエレメント)と書くのでもOKです。

JavaScript

// HTMLからpタグの要素のDOMエレメントを取得
const domElement = document.querySelector(“p”);
// DOMエレメントをjQueryオブジェクトに変換
const jqueryObject = $(domElement);
// この書き方でも同じ
const jqueryObject2 = jQuery(domElement);

jQueryオブジェクトのeach関数の構文

jQueryオブジェクトのeach関数の構文は以下になります。

JavaScript

jQueryオブジェクト.each(function(index, element) {  
  // 各要素に対して行う処理をここに書く
});

function()内にjQueryオブジェクトの各要素に対して行いたい処理を書きます。

function()の引数indexとelementは使わない場合は省略可能です。

ループの順序は、jQueryオブジェクトの内容の順序と同じで毎回同じです。

引数`index`について

引数indexには0始まりのループ回数の数値が入っています。

引数は、引数の順番が合っていれば変数名は自由に変えても問題ありません。

引数`element`について

引数elementには、その時点でのループ対象の要素が入っています。

$(this)とelementは、同じDOMエレメントを参照することになります。