JQuery中$.eachと$(selector).each()の違いの詳細

4359 ワード

オブジェクトと配列を遍歴するために使用できる汎用的な遍歴関数.配列と1つのlength属性を含む擬似配列オブジェクト(functionのargumentsオブジェクトなどの擬似配列オブジェクト)は、0からlength-1まで、他のオブジェクトが通過する属性を数値インデックスで遍歴する.
$.each()と$(selector).each()とは異なり、後者はjqueryオブジェクトの遍歴に特化しており、前者は任意の集合(配列またはオブジェクトにかかわらず)を遍歴するために使用できます.配列の場合、コールバック関数は配列のインデックスと対応する値を入力するたびに(値はthisキーで取得できますが、javascriptは文字列または数値であるにもかかわらず、this値をオブジェクトとしてパッケージします).メソッドは、オブジェクトを巡回する最初のパラメータを返します.
例:―――伝達配列
 
  






<br>   <br> $.each([52, 97], function(index, value) { <br> alert(index + ‘: ‘ + value); <br> }); <br>   <br>


 
//
 
0: 52
1: 97

例:――――マッピングがセットとして使用される場合、コールバック関数はキー値ペアを1つずつ入力します.
 
  






<br>   <br> var map = { <br> ‘flammable': ‘inflammable', <br> ‘duh': ‘no duh' <br> }; <br> $.each(map, function(key, value) { <br> alert(key + ‘: ‘ + value); <br> }); <br>   <br>


 
//
 
flammable: inflammable
duh: no duh

例:――コールバック関数でreturn falseを終了する場合$.each()は、非falseを返すとforループでcontinueを使用するように、すぐに次のループに入ります.
 
  



 
 

 

 

 

 

 

 

<br>     var arr = [ "one", "two", "three", "four", "five" ];// <br>     var obj = { one:1, two:2, three:3, four:4, five:5 }; // <br>     jQuery.each(arr, function() {  // this <br>       $(“#” + this).text(“Mine is ” + this + “.”);  // this , one, two <br>        return (this != “three”); // this = three <br>    }); <br>     jQuery.each(obj, function(i, val) {  // i , val <br>       $(“#” + i).append(document.createTextNode(” �C ” + val)); <br>     }); <br>


//
 
Mine is one. �C 1
Mine is two. �C 2
Mine is three. �C 3
- 4
- 5

例:――――配列の項目を遍歴し、indexとvalueに伝達する
 
  






<br> $.each( ['a','b','c'], function(i, l){ <br> alert( “Index #” + i + “: ” + l ); <br> }); <br>   <br>



例:――――オブジェクトの属性を遍歴し、keyとvalueに伝達する
 
  






<br>   <br> $.each( { name: “John”, lang: “JS” }, function(k, v){ <br> alert( “Key: ” + k + “, Value: ” + v ); <br> }); <br>   <br>



自己コメントの例
 
  
1. ( retrun true)
 






<br>   <br> var myArray=["skipThis", "dothis", "andThis"]; <br> $.each(myArray, function(index, value) { <br> if (index == 0) { <br> return true; // equivalent to ‘continue' with a normal for loop <br> } <br> // else do stuff… <br> alert (index + “: “+ value); <br> }); <br>   <br>