jqueryにおける$each()メソッドの使用ガイドライン

4878 ワード

$.each()と$(selector).each()とは異なり、後者はjqueryオブジェクトの遍歴に特化しており、前者は任意の集合(配列またはオブジェクトにかかわらず)を遍歴するために使用できます.配列の場合、コールバック関数は配列のインデックスと対応する値を入力するたびに(値はthisキーで取得できますが、javascriptは文字列または数値であるにもかかわらず、this値をオブジェクトとしてパッケージします).メソッドは、被遍歴オブジェクトの第1のパラメータを返す.
each()法はDOMサイクル構造を簡潔にし,誤りを生じにくい.each()関数は非常に強力な遍歴機能をカプセル化し、使用も便利で、1次元配列、多次元配列、DOM、JSONなどjavaScriptの開発過程で$eachを使用することで、私たちの作業量を大幅に軽減することができます.
次にeachのいくつかのよく使われる使い方をお話しします
each処理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
each処理2 D配列

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


arr 2は2次元配列であり、itemはこの2次元配列の各配列を取ることに相当する.item[0]は、各1次元配列の最初の値alert(i)に対して0,1,2に出力されます.この2次元配列には3つの配列要素alert(item)が含まれているため、出力は['a','aaa','aaa'],['b','bbb'],['bb'],['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,1,2にする
alert(val)は出力をa,aa,aaa,b,bb,bbb,c,cc,cccとする
eachはjsonデータを処理して、このeachは更にひどくて、すべての属性を循環することができます

  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はなぜkeyが数字ではなく属性なのか、jsonフォーマット内は無秩序な属性-値のセットであり、無秩序である以上、数字は何なのか.このvalはobj[key]に等しい
ecahはdom要素を処理し、ここではinputフォーム要素を例に挙げます.
domにこのようなコードがあるなら






次にeachを使用します

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


では、alert(val)はフォーム要素であるため[object HTML InputElement]を出力します.
alert(i)出力を0,1,2,3にする
alert(val.name);出力aaa,bbb,ccc,dddをthisを使用すると.nameは同じ結果alert(val.value)を出力します.この場合、出力111222333444が使用する.valueは同じ結果を出力します
上記のコードを次のように変更すると

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


出力の結果が同じであることがわかりますが、二つの書き方がどこで違うのか、私もまだ分かりません.この変更を上の数段の配列に適用する操作も同様の結果を出力する.
このように,いくつかの例の実際の結果はすでに答えを得た.これ以上研究を続けても、その理由を知らないわけにはいかない.
以上の例からjQueryオブジェクトとjQueryオブジェクトの両方がこの方法を実現していることが分かるが,jQueryオブジェクトに対しては,eachメソッドを単純に依頼しただけである:jQueryオブジェクトを最初のパラメータとしてjQueryのeachメソッドに渡す.
jQueryのeach実装を見て(ネットワーク抜粋)

function (object, callback, args) {
//        :       obj,       fn,     args
var name, i = 0,length = object.length;
if (args) {
if (length == undefined) {
for (name in object) {
if (callback.apply(object[name], args) === false) {
break;
}
}
} else {
for (; i < length;) {
if (callback.apply(object[i++], args) === false) {
break;
}
}
}
} else {
if (length == undefined) {
for (name in object) {
if (callback.call(object[name], name, object[name]) === false) {
break;
}
}
} else {
for (var value = object[0]; i < length && callback.call(value, i, value) !== false; value = object[++i]) {}
/*object[0]  jQuery       DOM  ,  for  ,
      jQuery        DOM  ,   callback.call( value,i,value);
 callback this    value  ,        ,i     ,value  DOM  ;
  callback     function(index, elem) { ... }    。
      $("...").each(function(index, elem){ ... });
*/
}
}
return object;
}


jqueryは,入力された要素に基づいて自動的に判断し,判断結果に基づいてapplyかcallかの処理を行う.fnの実装では、thisポインタが配列またはオブジェクトのサブ要素を直接参照することができる.
1.objオブジェクトは配列です
eachメソッドは、あるサブエレメントを呼び出して返される結果がfalseになるまで、配列のサブエレメントの個々のfn関数呼び出しを行います.すなわち、提供されたfn関数を処理して、一定の条件を満たすとeachメソッド呼び出しを終了することができます.eachメソッドがargパラメータを提供する場合、fn関数呼び出しの受信パラメータはargであり、そうでない場合、サブエレメントインデックス、サブエレメント自体
2.objオブジェクトは配列ではありません
このメソッドと1の最大の違いは,fnメソッドが逐次戻り値を考慮せずに行われることである.すなわち、objオブジェクトのすべてのプロパティは、fn関数がfalseを返してもfnメソッドによって呼び出されます.呼び出し元のパラメータは1と類似しています.
以上が本文のすべてですが、お好きになってください.