https://idea-hack.com/blog/106529/
jQuery.each()を便利に使う4つのサンプルコード

jQuery.each()を便利に使う4つのサンプルコード

jQuery.each()はセレクターしか指定できないと思っていませんか?実はオブジェクトも配列もJSONも指定できるので、やり方を抑えておきましょう。

jQuery.each()関数とは何か?

jQuery.each()関数は対象となるjQueryオブジェクトに対して同一の処理を行うループ処理を行う関数です。対象となる親要素の中にある各子要素に対して同一の処理を加えていくものと考えれば良いでしょう。

この関数は基本的な構文のような物なので、知っている人も多いと思います。

しかし、書き方が複数あったり、$('div')のように要素を指定する方法意外にも、配列やオブジェクトを指定することもできることはあまり知られていません。

そこで、この記事ではjQuery.each()をもう少し突っ込んでまとめてみます。

jQuery.each() 構文の書き方

セレクターで指定する

次のサンプルはセレクターを使ってページ上の全ての<div>要素を取得して、そのindexとIDを出力するコードです。

Output
Text 1
Text 2
Text 3
Pug
#targetText1 Text 1
	#targetText2 Text 2
	#targetText3 Text 3
JavaScript
// DOM ELEMENTS
jQuery('div').each(function(index, value) {
  console.log(`div${index}:${jQuery(value).text()}`);
});
/*-----
 Console.logの結果
 "div0:Text 1"
"div1:Text 2"
"div2:Text 3"
-------*/

配列を指定する

次に配列を用意して、それぞれの値をループして処理するコードを紹介します。

下記のサンプルコードではループの中の値をそのまま出力しています。

JavaScript
// 配列
const arr = [
  'one',
  'two',
  'three',
  'four',
  'five'
];

jQuery.each(arr, function(index, value) {
  console.log(value);
  // 3番目で終了する
  return (value !== 'three');
});

// Consolelogの出力結果: one two three

オブジェクトを指定する

次に、オブジェクトを指定してループを行うコードを紹介します。

JavaScript
// OBJECTS
const obj = {
  one: 1,
  two: 2,
  three: 3,
  four: 4,
  five: 5
};

jQuery.each(obj, function(key, value) {
  console.log(this);
	console.log(value);
});

// Console.logの出力結果: 1 2 3 4 5

このサンプルも「配列」と「セレクター」を利用してループを行うのと同様の結果を得ることができます。

しかし、オブジェクトの場合は「thisとvalue」は厳密には違う物であることに注意しましょう。

上記のコードは「console.log(value)」も「console.log(this)」も「1」を返します。 valueは厳密には「1」を単純に返していますが、thisは「one:1」を取得した上で、暗黙上に「1」を返しているにすぎません。

そのため、型で比較した場合はfalseになります。value自体はNumber型でthisはオブジェクト型だからです。

JavaScript
jQuery.each({ one: 1 } , function(key, value) {
  console.log(this == value);
  console.log(this === value);
});

//console.logの結果
// true
// false

JSONを指定する

JSONをループさせることも可能です。

JavaScript
const colors = [
  { 'red': '#f00' },
  { 'green': '#0f0' },
  { 'blue': '#00f' }
];

jQuery.each(colors, function() {
  $.each(this, function(name, value) {
    console.log(`${name} = ${value}`);
  });
});

JSONは入れ子になっているので、サンプルコードのようにjQuery.each()メソッドを2度利用する必要があります。

まとめ

このようにjQuery.each()メソッドはセレクターを指定して使う物と思いがちですが、セレクター以外も指定可能なので、知っておくと開発の効率が増します。