メニュー

jQueryのeach関数の使い方

JavaScript
当ページのリンクには広告が含まれています。
  • 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オブジェクトが指す各要素に対するループ処理が行えます。

あわせて読みたい
.each() | jQuery API Documentation
jQueryオブジェクトとは

jQueryの関数は、jQueryオブジェクトでないと使用できないので、以下のようにWEBページの要素をjQueryオブジェクトに変換する必要があります。

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

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

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

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

あわせて読みたい
JavaScriptでHTMLを操作するためのDOMやDOMツーリーについて DOMやDOM要素というのがよくわかりません DOMやDOM要素、ノードについて説明します JavaScriptではHTMLをDOMとして扱う JavaScriptではWEBページをDOMとして扱うので、W…

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エレメントを参照することになります。

jQueryのeach関数

jQueryのeach関数について

jQueryのeach関数は、引数の配列やハッシュの各要素をループして処理を行うことができます。

引数は、配列やハッシュ、jQueryオブジェクトのリストなどリスト形式である必要があります。

あわせて読みたい
jQuery.each() | jQuery API Documentation

jQueryのeach関数の構文

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

JavaScript
$.each(array, function(indexInArray, value) {  
  // arrayの各要素に対して行う処理をここに書く
});
// 以下でも同じです（引数は不要なら省略可）
jQuery.each(array, function(){  
  // arrayの各要素に対して行う処理をここに書く
});

function()内に最初の引数arrayの各要素に対して行いたい処理を書きます。

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

引数indexInArrayについて

引数indexInArrayには引数arrayの添え字の数値が入っています。

indexInArrayは常に0始まりで、配列と同じ順でループ処理が行われます。

引数valueについて

引数valueには、ループする引数arrayの要素が順番に入ります。

each関数のループの制御

each関数のループの制御に付いて

jQueryのeach関数は、JavaScriptのforEach文と違い、ループを途中で抜けることができます。

jQueryオブジェクトのeach関数、jQueryのeach関数ともに同じです。

each関数のループ処理内で以下の文を書くとループ処理を制御できます。

  • ループを途中を中止して抜けるにはreturn false;
  • 次の要素のループに進むにはreturn false;

each関数のループを中止して外に出る

each関数のループ処理をすぐに抜けて外に出るにはfunction()内でreturn false;と書きます。

each関数で次の要素のループに進む

each関数で現在の要素のループ処理は終えて、次の要素のループ処理に移るにはfunction()内でreturn true;と書きます。

JavaScript
よかったらシェアしてね！
  • URLをコピーしました！
目次