Guide to using the $each() method in jquery

The each function in jQuery is very convenient. The $.each () function encapsulates a very powerful traversal function. It can traverse one-dimensional arrays, multi-dimensional arrays, DOM, JSON Wait, using $each in the JavaScript development process can greatly reduce our workload. Here is a simple function that imitates each, which can only handle array type objects.

$.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, Callback function Each time the index of the array and the corresponding value are passed in (the value can also be obtained through the this keyword, but javascript will always wrap this value as an object - even if it is a string or a number) , the method will return the first parameter of the traversed object. 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 ease our work. quantity.

Here are some common uses of

each

each handles one-dimensional arrays

##

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 processing

two-dimensional array

　　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 a, aa, aaa, b, bb, bbb, c, cc, ccc

each processes json data, this each has Even more powerful, you can loop through each 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, it will output The same result

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.

It can be seen from the above examples 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

(network 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 judge based on the incoming elements. Then depending on the judgment result, whether to apply or call method is adopted. In the implementation of fn, you can directly use this pointer to reference the sub-elements of the array or object.

1. The 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 sub-element is false. , that is to say, we can process it with the provided fn function and exit the each method call after it meets certain conditions. When the each method provides the arg parameter, the parameter passed in by the fn function call is arg, otherwise: the subelement index, the subelement itself

2.obj The 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.

The above is the detailed content of Guide to using the $each() method in jquery. For more information, please follow other related articles on the PHP Chinese website!