jQueryのeachメソッド【現役エンジニアが解説】

PROGRAM

今回は、jQueryのeachメソッドについて、簡単に解説していきます。

配列

まず、以下の配列を想定します。

var names = ['田中','山田','高橋'];

これは以下のようにjQueryのeachメソッドで繰返処理可能です。

$.each(names, function(index, value){
  console.log(index + '番目:' + value);
});

上記のサンプルコードを実行した結果は、下記のようになります。

0番目:田中
1番目:山田
2番目:高橋

オブジェクト

以下のオブジェクトを想定します。

var personalInfo = {
  name: '田中',
  gender: '男性',
  age: 22
}

オブジェクトもeachメソッドで繰返処理できます。

$.each(personalInfo, function(key, value){
  console.log(key + ':' + value);
});

上記の例のコードを実行すると、以下のような結果となります。

names:田中
gender:男性
age:22

HTML

以下のHTMLがあるとします。

<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

eachメソッドではHTML要素も繰返処理ができます。

$('li').each(function(index, element){
  console.log(index + '番目:' + $(element).text());
});

上記のli要素のeachメソッドの例の実行結果は以下のようになります。

0番目:項目1
1番目:項目2
2番目:項目3