jQuery.each()

指定した配列またはオブジェクトの各要素に対して実行する処理を指定する。

構文

window.jQuery.each(array, function(index, value){statements})

jQuery.each(array, function(index, value){statements})

$.each(array, function(index, value){statements})

window.jQuery.each(object, function(name, value){statements})

jQuery.each(object, function(name, value){statements})

$.each(object, function(name, value){statements})

array

配列を指定する。

function( index , value ){ statements }

配列の各要素に対して呼び出されるコールバック関数を指定する。

index には配列のインデックス番号(0〜)、 value には配列の要素の値が渡される。

object

オブジェクトを指定する。

function( name , value ){ statements }

オブジェクトの各プロパティに対して呼び出されるコールバック関数を指定する。

name にはプロパティ名、 value にはプロパティ値が渡される。

サンプル

<script>
  var a = [1, 2, 'foo'];

  $.each(a, function(i, v){
    document.writeln('<p>' + i + ' ' + v + '</p>');
  });
</script>

<script>
  var o = {
    foo: 1,
    bar: 2,
    baz: 'qux'
  };
  $.each(o, function(n, v){
    document.writeln("<p>" + n + " " + v + "</p>");
  });
</script>

配列の反復処理

jQuery を使わなくても、配列の反復処理を行うことができる。

配列の反復処理を行うには様々な方法があるが、最も一般的で推奨される方法が Array.prototype.forEach() を使う方法である。可読性が高く、モダンなJavaScriptでよく利用される。

const myArray = ['foo', 'bar', 'baz'];

myArray.forEach(function(value, index, array) {
    console.log(`Index: ${index}, Value: ${value}`);
});

アロー関数を使って、より簡潔に書くこともできる。

const myArray = ['foo', 'bar', 'baz'];

myArray.forEach((value, index) => {
    console.log(`Index: ${index}, Value: ${value}`);
});

オブジェクトの反復処理

jQuery を使わなくても、オブジェクトの各プロパティに対して反復処理を行うことができる。オブジェクトの各プロパティに対して反復処理を行うには様々な方法がある。

Object.keys() は、オブジェクト自身のすべての列挙可能なプロパティ名を文字列の配列として返す。この配列に対して forEach() や for...of を使用することで、オブジェクトを安全かつ簡潔に反復処理できる。

const myObject = {
    name: 'John Doe',
    age: 30,
    city: 'New York'
};

// forEach() を使用
Object.keys(myObject).forEach(key => {
    const value = myObject[key];
    console.log(`Key: ${key}, Value: ${value}`);
});

// for...of を使用
for (const key of Object.keys(myObject)) {
    const value = myObject[key];
    console.log(`Key: ${key}, Value: ${value}`);
}

参考文献

OpenJS Foundation (2025) jQuery.each() | jQuery API Documentation