JQueryでのeach()の使い方の説明

各一致する要素をコンテキストとして関数を実行します.つまり、渡される関数を実行するたびに、関数のthisキーワードは異なるDOM要素(毎回異なる一致要素)を指します.また、関数を実行するたびに、実行環境である要素が一致する要素の集合内に位置することを示す数値値がパラメータ(ゼロから始まる整形)として関数に渡されます.「false」を返すと、ループが停止します(通常のループで「break」を使用するように).「true」を返して次のループにジャンプします(通常のループで「continue」を使用するように).後ろのcallbackはコールバック関数で、要素を巡るときに与えるべき操作を示します.まず、2つの画像を反復し、srcプロパティを設定する簡単な例を見てみましょう.注意:ここでthisは、jQueryオブジェクトではなくDOMオブジェクトを指します.

 
  
<img/><img/>jQuery   : 
   
  
$("img").each(function(i){ 
   
  
"http://blog.51cto.com/viewpic.php?refimg=" + this.src = "test" + i + ".jpg"; 
   
  
}); 
  
 
 

結果:[,]もちろん、要素を巡回するとき、jqueryはカスタムジャンプを許可します.サンプルコードを見てください.'return'を使用してeach()ループを事前にジャンプすることができます.HTMLコード:

 
  
<button>Change colors</button> 
   
  
<span></span> 
   
  
<div></div> 
   
  
<div></div> 
   
  
<div></div> 
   
  
<div></div> 
   
  
<div id="stop">Stop here</div> 
   
  
<div></div> 
   
  
<div></div> 
   
  
<div></div> 
   
  
 
 

jQueryコード:

 
  
$("button").click(function(){ 
   
  
$("div").each(function(index,domEle){ 
   
  
$(domEle).css("backgroundColor","wheat"); 
   
  
if($(this).is("#stop")){ 
   
  
$("span").text(" div  #"+index+"     。"); 
   
  
return false; 
   
  
} 
   
  
}); 
   
  
 
 

あるいはこう書きます.

 
  
$("button").click(function(){ 
   
  
$("div").each(function(index){ 
   
  
$(this).css("backgroundColor","wheat"); 
   
  
if($(this).is("#stop")){ 
   
  
$("span").text(" div  #"+index+"     。"); 
   
  
return false; 
   
  
} 
   
  
}); 
  
 
 

では、どのようにeachから飛び出しますか?jqueryは選択したオブジェクトを巡回するときにeachを使うのが便利です.条件に合ったオブジェクトを見つけて、このループから飛び出すアプリケーションがあります.JAvascriptのジャンプサイクルは一般的にbreakを用いる.同僚はこの問題に直面して、無意識にbreakを使って、この循環から飛び出したいと思っています.結果はSyntaxError:unlabeled break must be inside loop or switchを間違えて調べて、1つのコールバック関数の中でreturn falseを使うべきで、大多数のjqの方法はすべてこのようです

 
  
   'false'       (            'break')。 
   
  
   'true'        (           'continue')。 
  
 
 

要素インデックスとコンテンツを使用しながら、配列を例にします.(iはインデックス、nはコンテンツ)

 
  
$.each( [0,1,2], function(i, n){ 
   
  
alert( "Item #" + i + ": " + n ); 
   
  
}); 
   
  
 
 

結果:[Item#]0[:]0[Item#]1[:]1[Item#]2[:]2つのパスオブジェクトは、メンバー名と変数の内容を同時に使用します.(iはメンバー名、nは変数内容)

 
  
$.each( { name: "John", lang: "JS" }, function(i, n){ 
   
  
alert( "Name: " + i + ", Value: " + n ); 
   
  
}); 
   
  
 
 

jQueryのeachメソッドのいくつかの一般的な使い方Jsコードについて説明します

 
  
var arr = [ "one", "two", "three", "four"]; 
   
  
$.each(arr, function(){ 
   
  
alert(this); 
   
  
}); 
   
  
//    each        ：one,two,three,four 
   
  
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]] 
   
  
$.each(arr1, function(i, item){ 
   
  
alert(item[0]); 
   
  
}); 
   
  
//  arr1       ，item           ， 
   
  
//item[0]                  
   
  
//      each     ：1 4 7 
   
  
var obj = { one:1, two:2, three:3, four:4}; 
   
  
$.each(obj, function(key, val) { 
   
  
alert(obj[key]); 
   
  
}); 
   
  
//  each      ，         
   
  
//     ：1 2 3 4