Guide to using the $each() method in jquery_jquery

$.each() is different from $(selector).each(). The latter is specially used for traversing jquery objects. The former can be used to traverse any collection (whether it is an array or an object). If it is an array, the callback function will Pass in the index of the array and the corresponding value (the value can also be obtained through the this keyword, but JavaScript will always wrap this value as an object - whether it is a string or a number), and the method will return the traversed object. One parameter.

The

each() method can make the DOM loop structure concise and less error-prone. The each() function encapsulates a very powerful traversal function and is very convenient to use. It can traverse one-dimensional arrays, multi-dimensional arrays, DOM, JSON, etc.
Using $each during the JavaScript development process can greatly reduce our workload.

Here are some common uses of each

each processes one-dimensional array

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

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

Each handles two-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 two-dimensional array, and item is equivalent to taking each array in this two-dimensional array.
item[0] is relative to taking the first value in each one-dimensional array
alert(i) will output 0, 1, 2 because this two-dimensional array contains 3 array elements
alert(item) will output as ['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']

After slightly changing the processing of this two-digit 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 as a, aa, aaa, b, bb, bbb, c, cc, ccc

each processes json data, this each is even more powerful, it can loop through every attribute

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

Here alert(key) will output one two three
alert(val) will output one, 1, two, 2, three, 3
Why is the key here not a number but an attribute? Because the json format is a set of unordered attributes-values. Since it is unordered, where are the numbers?
And this val is equivalent to obj[key]

ecah processes DOM elements. Here, an input form element is used as an example.

If you have a piece of code like this in your 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 as follows

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

alert(val.name); will output aaa, bbb, ccc, ddd. If this.name is used, the same result will be output
alert(val.value); will output 111,222,333,444. If you use this.value, the same result will be output

If you change the above code into the following form

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

As you can see, the output results are the same. As for the difference between the two writing methods, I don’t know yet. This change will produce the same results when applied to the array operations above.

In this way, the actual results of several examples have been answered. Then continue to study, you can never know what is happening and why.

From the above examples, we can see that both jQuery and jQuery objects implement this method. For jQuery objects, the each method is simply delegated: the jQuery object is passed as the first parameter to jQuery's each method.

Look at the implementation of each in jQuery (Internet excerpt)

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 will automatically make a judgment based on the incoming elements, and then use the apply or call method based on the judgment result. In the implementation of fn, you can directly use this pointer to reference the sub-elements of the array or object.

1.obj object is an array

The

each method will call the fn function one by one on the sub-elements in the array until the result returned by calling a certain sub-element is false. In other words, we can process it with the provided fn function to make it meet certain conditions. Just exit the each method call. When the each method provides the arg parameter, the parameter passed in by the fn function call is arg, otherwise: the sub-element index, the sub-element itself

2.obj object is not an array

The biggest difference between this method and 1 is that the fn method will be executed one after another without considering 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. The parameters passed in the call are similar to 1.

The above is the entire content of this article, I hope you all like it.