jqueryの各()メソッドを例を使って詳しく解説

each() 関数は、基本的にすべてのフレームワークによって提供されるツール関数であり、それを通じてオブジェクトと配列の属性値を走査して処理することができます。 jQuery と jQuery オブジェクトの両方がこのメソッドを実装します。jQuery オブジェクトの場合、各メソッドは単純に委任されます。つまり、jQuery オブジェクトは最初のパラメーターとして jQuery の各メソッドに渡されます。つまり、jQuery によって提供される各メソッドは、すべてのサブ要素です。パラメータ 1 で指定されたオブジェクトは 1 つずつ呼び出されます。 jQuery オブジェクトが提供する each メソッドは、jQuery 内のサブ要素を 1 つずつ呼び出します。

それぞれのよく使われる用途をいくつか挙げます

1. 各プロセスは

一次元配列

 var arr1 = [ "aaa", "bbb", "ccc" ];      
  $.each(arr1, function(i,val){      
      alert(i);   
      alert(val);
  });

alert(i) は 0、1、2 を出力します

alert(val) は aaa、bbb、ccc を出力します

2. 各処理は

二次元配列

　var arr2 = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]      
　　$.each(arr, function(i, item){      
      alert(i);   
      alert(item);      
　　});

arr2 は二次元配列であり、 item はこの二次元配列内の各配列を取得することに相当します。

item[0] 各 1 次元配列の最初の値を取得することに対する相対値
alert(i) は 0、1、2 を出力します。この 2 次元配列には 3 つの配列要素が含まれているためです。
alert(item) は For [' を出力しますa', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']

これら2つの配列処理後は少し変更されており、

var arr = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]      
 　　$.each(arr, function(i, item){      
      　　$.each(item,function(j,val){
       　　　　 alert(j);
        　　　　alert(val);
    　}); 
});

alert(j)は0、1、2、0、1、2、0、1、2として出力されます

alert(val)はa、aa、aaa、b、bbとして出力されます、bbb、c、cc、ccc

それぞれはjsonデータを処理します。これはそれぞれさらに強力で、すべての属性を循環できます

var obj = { one:1, two:2, three:3};      
 　　each(obj, function(key, val) {      
      　　alert(key);   
      　　alert(val);      
 　　});

ここでalert(key)は1、2、3を出力します

alert(val)は1を出力します、 1、2、2、3、3
なぜここのキーは数値ではなく属性なのでしょうか? json 形式は順序のない属性値のセットであるため、数値はどこにあるのでしょうか?
そして、この val は obj[key] に相当します

ecah は dom 要素を処理します。ここでは例として入力フォーム要素が使用されます。

あなたの dom に次のようなコードがある場合

それぞれを次のように使用します

$.each($("input:hidden"), function(i,val){  
     alert(val);
     alert(i);
     alert(val.name);
     alert(val.value);   
 });

すると、alert(val) はフォーム要素なので [object HTMLInputElement] を出力します。

alert(i) は 0、1、2、3 を出力します

alert(val.name); は aaa、bbb、ccc、ddd を出力します、this.name を使用すると同じ結果が出力されます

alert (val .value); は 111,222,333,444 を出力します。 this.value を使用すると、同じ結果が出力されます。

each(callback) 一致する各要素をコンテキストとして関数を実行します。 渡された関数が実行されるたびに、関数内の this キーワードが異なる DOM 要素 (毎回異なる一致する要素) を指すことを意味します。また、関数が実行されるたびに、一致した要素の集合における実行環境としての要素の位置を表す数値（0から始まる整数）が関数にパラメータとして渡されます。 「false」を返すとループが停止します (通常のループで「break」を使用するのと同じです)。次のループにジャンプするには、「true」を返します (通常のループで「
Continue」を使用するのと同じです)。 次のコールバックは
コールバック関数 で、要素を走査するときに指定する必要がある操作を示します。以下の簡単な例から始めましょう: 2 つの画像を反復処理し、その src 属性を設定します。注: ここでは、これは jQuery オブジェクトではなく DOM オブジェクトを指します。

each() メソッドは、一致する要素ごとに実行する関数を指定します。

ヒント: false を返すと、ループを早期に停止することができます。
構文
$(selector).each(function(index,element)) パラメータ 説明
function(index,element) 必須。一致する要素ごとに実行する関数を指定します。
•index - セレクターのインデックス位置
•element - 現在の要素 (「this」セレクターを使用することもできます)

$("button").click(function(){ 
$("li").each(function(){ 
alert($(this).text()) 
}); 
});

那怎么跳出each呢 
jquery再遍历选定的对象时候用each比较方便。有种应用是找到里面符合条件的对象后，要跳出这个循环。
javascript的跳出循环一般用break. 
同事遇到这个问题，下意识 的用了break，想跳出这个循环。结果报错 
SyntaxError: unlabeled break must be inside loop or switch 
经查，应该用一个 在回调函数里return false即可，大多数jq的方法都是如此的 

以上がjqueryの各()メソッドを例を使って詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。