jquery の each() の概要とそのトラバーサルメソッドの詳細な例-jsチュートリアル-php.cn

jquery の each() の概要とそのトラバーサルメソッドの詳細な例

伊谢尔伦

リリース： 2017-06-19 15:50:11

オリジナル

1377 人が閲覧しました

each() メソッドを使用すると、DOM ループ構造を簡潔にし、エラーが発生しにくくなります。 each() 関数は非常に強力なトラバーサル関数をカプセル化しており、1 次元配列、多次元配列、DOM、JSON などをトラバースできます。
JavaScript は私たちの作業負荷を大幅に軽減します。それぞれの一般的に使用される用途をいくつか挙げます
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 = [[&#39;a&#39;, &#39;aa&#39;, &#39;aaa&#39;], [&#39;b&#39;, &#39;bb&#39;, &#39;bbb&#39;], [&#39;c&#39;, &#39;cc&#39;, &#39;ccc&#39;]]      
　　$.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 = [[&#39;a&#39;, &#39;aa&#39;, &#39;aaa&#39;], [&#39;b&#39;, &#39;bb&#39;, &#39;bbb&#39;], [&#39;c&#39;, &#39;cc&#39;, &#39;ccc&#39;]]      
 　　$.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) は one two three を出力します

alert ( val) は、one、1、two、2、three、3 を出力します

ここでキーが数値ではなく属性であるのはなぜでしょうか。json 形式は順序付けされていない属性値のセットであるため、どうやってそれが存在するのでしょうか。毛糸の布？
そして、この val は obj[key] と同等です

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

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

<input name="aaa" type="hidden" value="111" />
<input name="bbb" type="hidden" value="222" />
<input name="ccc" type="hidden" value="333" />
<input name="ddd" type="hidden"  value="444"/>

ログイン後にコピー

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

$.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 を使用すると、

jquery が自動的に判断し、その判断結果に基づいて apply または call メソッドを使用します。 fn の実装では、このポインターを直接使用して、配列またはオブジェクトのサブ要素を参照

できます。

1.obj オブジェクトは配列です

各メソッドは、特定のサブ要素を呼び出して返される結果が false になるまで、配列内のサブ要素に対して fn 関数を 1 つずつ呼び出します。つまり、処理することができます。提供された fn 関数で、特定の条件を満たした後に各メソッド呼び出しを終了します。各メソッドが arg パラメーターを提供する場合、fn 関数呼び出しによって渡されるパラメーターは arg です。それ以外の場合: サブ要素のインデックス、サブ要素自体

2.obj オブジェクトは配列ではありません

最大の違いこのメソッドと 1 の間には fn メソッドがあり、戻り値に関係なく 1 つずつ実行されます。つまり、fn 関数が false を返した場合でも、obj オブジェクトのすべてのプロパティが fn メソッドによって呼び出されます。呼び出しで渡されるパラメータは 1 に似ています。

3 つの走査メソッド

1. Selector + traversal

$('div').each(function (i){

i はインデックス値です

これは、各

dom オブジェクトを取得して走査することを意味します

});

2. Selector + traversal

$('div').each(function (index,domEle){

Index はインデックス値です