each () detailed

Each () method makes the DOM loop structure concise and error-prone. The each () function encapsulates a very powerful traversal function that can be easily used to traverse one-dimensional arrays, multidimensional arrays, DOM, JSON, and so on, which can greatly reduce our workload by using $each in JavaScript development. Here are some common uses for each to process a one-dimensional arrayvarARR1 = ["AAA", "BBB", "CCC" ]; $.each (arr1,function(i,val) {alert (i);  Alert (val);   }); Alert (i) will output 0,Thealert (val) outputs AAA,BBB,CCC each processing a two-dimensional arrayvarARR2 = [[' A ', ' AA ', ' aaa '], [' B ', ' BB ', ' BBB '], [' C ', ' cc ', ' CCC ']] $.each (arr,function(I, item) {alert (i);      　　alert (item);  }); ARR2 is a two-dimensional array, and item is equivalent to each of the arrays in the two-dimensional array. item[0] With respect to the first value in each one-dimensional array, alert (i) outputs 0,The, because the two-dimensional array contains 3 elements of an array, alert (item) outputs the [' A ', ' AA ', ' aaa '],[' b ', ' BB ', ' BBB '],[' C ', ' cc ', ' CCC '] After a minor change to the handling of this two-bit arrayvararr = [[' 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) outputs the output to 0,1,2,0,1,2,0,1,2Alert (val) will output as A,AA,AAA,B,BB,BBB,C,CC,CCC each to process the JSON data, this each has more powerful, can loop each propertyvarobj = {one:1, two:2, Three:3}; Each (obj,function(Key, Val) {alert (key);       　　Alert (val);   }); Here alert (key) will output one of the Threealert (Val) outputs one,1,two,2,three,3this way, why is key not a number but a property, because JSON is a set of unordered properties in the format-value, since the disorder, and how to figure it. This val equates to Obj[key] Ecah handles DOM elements, where an input form element is used as an example. If you have a code like this in the 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"/>then you use each of the following $.each ($ ("Input:hidden"),function(i,val) {alert (val);     alert (i);     alert (val.name);    alert (Val.value);  });   Then, alert (val) will output [object Htmlinputelement] because it is a form element. alert (i) outputs the output to 0,Thealert (val.name); aaa,bbb,ccc,ddd output, if using this.name will output the same result alert (val.value); The output is 111,222,333,444If using This.value will output the same result if it will be changed to the following paragraph in the form of $ ("Input:hidden"). each (function(i,val) {alert (i);    alert (val.name);       alert (Val.value); }); As you can see, the result of the output is the same, and I don't know what the difference is between the two ways. This change will also output the same result if the operation is applied to the above array. In this way, the actual results of several examples have been answered. Then continue to study, the total can not know it does not know why. From the examples above, jquery and jquery objects both implement this method, and for jquery objects, simply delegate each method: The jquery object is passed as the first parameter to jquery's each method. See each of the implementations in jquery (web excerpt)function(object, callback, args) {//the method has three parameters: the object to be manipulated, obj, the function of the FN, the parameter of the function argsvarName, I = 0,length =object.length;if(args) {if(Length = =undefined) { for(Nameinchobject) {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(Nameinchobject) {if(Callback.call (Object[name], name, object[name]) = = =false) { Break;}}} Else { for(varValue = Object[0]; I < length && Callback.call (value, I, value)!==false; Value = object[++i]) {}/*Object[0] Gets the first DOM element in the jquery object, through a for loop, to iterate through the corresponding DOM element in the entire jquery object, through Callback.call (Value,i,value); Points the callback this object to the value object and passes two arguments, I for the index value, and value for the DOM element, where callback is a method similar to function (index, elem) {...}. So get $ ("..."). each (function (index, elem) {...});*/}}returnobject;} jquery automatically determines which elements are passed in, and then takes the handle of the Apply or call method based on the result of the decision. In the implementation of FN, you can use the this pointer to refer to an array or the child elements of an object directly. 1The . obj object is an array of each method that makes an FN function call to the elements of a group of neutrons, until the call to a child element returns a result of false, that is, we can exit each method call after the supplied FN function is processed so that it satisfies certain conditions. When the each method provides the arg parameter, the FN function call passes in the argument arg, otherwise: the child element Index, the child element itself2the. Obj object is not an array the maximum difference between this method and 1 is that the FN method is taken regardless of the return value. In other words, all properties of the Obj object will be called by the FN method, even if the FN function returns false. Call incoming parameters similar to 1

each () detailed