【jQuery】eachメソッドで繰り返し処理をする

2018年8月27日2024年10月31日

繰り返し処理

普通の配列を使う場合

// 配列
var array_data = ['配列1','配列2','配列3','配列4'];

$.each(array_data, function(i, val){
    console.log('添字:' + i + ' 値:' + val);
});

オブジェクトを使う場合

// オブジェクト
var obj_data = {animal:'犬',fruit:'リンゴ',car:'軽自動車'};

$.each(obj_data , function(i, val){
    console.log('キー:' + i + ' 値:' + val);
});

// 以下のように表示される
// キー:animal 値:犬
// キー:fruit 値:リンゴ
// キー:car 値:軽自動車

jQueryオブジェクトを使う場合

<div class="sample">サンプル1</div>
<div class="sample">サンプル2</div>
<div class="sample">サンプル3</div>

$.each($('.sample'), function(i, val){
    console.log('順番:' + i + ' text:' + $(val).text());
});

// 以下のように表示される
// 順番:0 text:サンプル1
// 順番:1 text:サンプル2
// 順番:2 text:サンプル3

ちなみに、プルダウン内のoptionの値を取得したい場合は以下の通り

<select class="sample">
  <option value="1">データ1</option>
  <option value="2">データ2</option>
  <option value="3">データ3</option>
</select>

$.each($('.sample').children(), function(i, val){
    console.log('順番:' + i + ' value:' + $(val).val() + ' text:' + $(val).text());
});

// 以下のように表示される
// 順番:0 value:1 text:データ1
// 順番:1 value:2 text:データ2
// 順番:2 value:3 text:データ3