js STUDIO

$.each()

$.each( collection, callback(index, value) ) 1.0追加

戻り値:Object

配列とオブジェクト両方の繰り返し処理を行う汎用的なイテレータ関数です。
この関数は$(selector).each()とは異なり、様々なマップ値や配列などのコレクション形式に対しての 繰り返し処理に使用されます。

引数 説明
collection 繰り返し処理を行いたい、配列またはオブジェクトを指定します。
callback 各繰り返し処理で実行したい関数を指定します。
index
配列であればインデックス番号、オブジェクトであればkeyが入ります。
value
繰り返し処理中の値が入ります。

サンプル

配列で使用する例です。

$.each([52, 97], function(index, value) {
  alert(index + ': ' + value);
});

結果は次のようになります。

0: 52 //1回目のalert
1: 97 //2回目のalert

コレクション型のマップ値で指定する例です。 

var map = {
  'hoge': 'ほげ',
  'fuga': 'ふが'
};
$.each(map, function(key, value) {
  alert(key + ': ' + value);
});

結果は次のようになります。

hoge: ほげ  //1回目のalert
fuga: ふが  //2回目のalert

callbackの関数内で戻り値としてfalseを返せば、ループ処理を中断することが出来ます。 false以外の値でreturnをすると、次のループ処理にスキップします。

デモ

配列とオブジェクトをループして、単語と数値の出力をしています。

<!DOCTYPE html>
<html>
<head>
<style>
  div { color:blue; }
  div#five { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
<script>
  var arr = [ "one", "two", "three", "four", "five" ];
  var obj = { one:1, two:2, three:3, four:4, five:5 };
  $.each(arr, function() {
    $("#" + this).text("これは、" + this + "です。");
     return (this != "three"); //"three"より後ろはスキップします。
 });
  $.each(obj, function(i, val) {
    $("#" + i).append(document.createTextNode("　：　" + val));
  });
</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM