Guidelines for using the $each of method in jquery

$. each () and $(selector). each () is different, the latter is dedicated to jquery object traversal, the former can be used to traverse any collection (either an array or object), if it is an array, the callback function for each incoming array index and the corresponding value (value also can be obtained through this keyword, but javascript always packing this value as an object - albeit a string or a number), the method returns 1 parameters of the object being traversed.

The each() method makes the DOM loop structure simple and error-free. The each() function encapsulates 10 points of powerful traversal function, it is also very convenient to use, it can traverse 1-dimensional array, multi-dimensional array, DOM, JSON and so on
Using $each during javaScript development greatly reduced our workload.

Here are some common USES of each

each handles 1-dimensional arrays

var arr1 = [ "aaa", "bbb", "ccc" ]; 
$.each(arr1, function(i,val){ 
alert(i); 
alert(val);
});

alert(i) prints 0,1,2
alert(val) prints aaa, bbb, ccc

each handles 2-dimensional arrays

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

arr2 is a 2-dimensional array, and item is equivalent to taking every array in the 2-dimensional array.
item[0] takes the first value in every 1-dimensional array
alert(i) outputs 0,1,2 because the 2-dimensional array contains three array elements
alert(item) will output as ['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']

After a slight change in the handling of this 2-bit array

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) will output 0,1,2,0,1,2,0,1,2

alert(val) will output a, aa, aaa, b, bb, bbb, c, cc, ccc

each processes json data, and this each is even better, it cycles through every attribute

　　var obj = { one:1, two:2, three:3}; 
　　each(obj, function(key, val) { 
　　alert(key); 
　　alert(val); 
　　});

Here alert(key) outputs one two three
alert(val) outputs one, 1, two, 2, three,3
Here, why is key not a number but a property? Because json is an unordered set of property-values. If it is unordered, how can it be a number?
And this val is the same as obj[key]

ecah processes dom elements, with an input form element as an example.

If you have a piece of this code in 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 below

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

Then, alert(val) prints [object HTMLInputElement] because it is a form element.

alert(i) outputs 0,1,2,3

alert (val name); The output aaa bbb, ccc ddd, if use this name will output the same results
alert (val value); this.value will output 111,222,333,444 and the same result if this.value is used

If you change the form from the first piece of code above to the following

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

As you can see, the output is one, but I don't know what the difference is. The operation applied to the above arrays will output the same result.

Thus, the actual results of several examples have been answered. Then continue to study, can not know why do not know why.

From the above examples, it can be seen that both jQuery and jQuery objects implement this method. For jQuery objects, each simply delegates the jQuery object as the first parameter to jQuery's each method.

Take a look at the each implementation in jQuery

function (object, callback, args) {
// The method is 3 A parameter : The object of the operation obj , the function that performs the operation fn , the argument to the function 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] achieve jQuery Control in an object 1 a DOM Element, through for Cycle, 
 You get to go through the whole thing jQuery Each of the corresponding objects in the object DOM Element, through  callback.call( value,i,value);
 will callback the this Object to value Object and pass two parameters ,i Represents the index value, value said DOM Elements; 
 Among them callback Is similar to the  function(index, elem) { ... }  Methods. 
 So you get  $("...").each(function(index, elem){ ... });
*/
}
}
return object;
}

jquery automatically makes a judgment based on the element passed in, and then takes the processing of apply or call based on the judgment result. In the fn implementation, this Pointers can be used directly to reference arrays or child elements of objects.

1.obj objects are arrays

The each method will make the fn function call one by one to the neutron elements of the array until the result returned by a child element is false. In other words, we can exit the each method call after the provided fn function is processed to satisfy 1 condition. When the each method provides the arg argument, the fn function call passes in the argument arg, otherwise: child element index, child element itself

2.obj objects are not arrays

The main difference between this method and 1 is that the fn method is carried out successively without considering the return value. In other words, all properties of the obj object are called by the fn method, even if the fn function returns false. The parameters passed in by the call are similar to 1.

This is the end of this article, I hope you enjoy it.