$ Each () method in jquery User Guide _ jquery

The each function in jQuery is very convenient, $. the each () function encapsulates powerful traversal functions. It can traverse one-dimensional arrays, multi-dimensional arrays, DOM, JSON, and so on, $ each can greatly reduce our workload during javaScript development. Here we paste a simple function that imitates each and can only process array objects. $. Each () and $ (selector ). different from each (), the latter is used to traverse jquery objects. The former can be used to traverse any set (whether an array or an object). If it is an array, each time the callback function imports an array index and the corresponding value (the value can also be obtained through the this keyword, but javascript will always wrap this value as an object-although it is a string or a number ), the method returns the first parameter of the retrieved object.

The each () method simplifies the DOM loop structure and is not prone to errors. The each () function encapsulates powerful traversal functions and is easy to use. It can traverse one-dimensional arrays, multi-dimensional arrays, DOM, JSON, and so on.
Using $ each in javaScript development can greatly reduce our workload.

Next I will mentionCommon usage of each

Each processes 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 processes 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 every array in the two-dimensional array.
Item [0] is relative to the first value in each one-dimensional array.
Alert (I) will output 0, 1, 2, because the two-dimensional array contains three array elements
Alert (item) is output as ['A', 'A', 'aaa'], ['B', 'bb ', 'bbb'], ['C ', 'cc', 'ccc ']

After the processing of the two arrays is slightly changed

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, 1, 2

Alert (val) is output as a, aa, aaa, B, bb, bbb, c, cc, ccc

When each processes json data, this each is even more powerful and 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
Here, why is the key not a number but an attribute, because the json format contains a group of unordered Attribute-values. Why are numbers unordered.
This val is equivalent to obj [key].

Ecah processes dom elements. Here we use an input form element as an example.

If you have such code in the dom

Then you use the 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); 111,222,333,444 is output. If this. value is used, the same result is output.

If you change the code above to the following format:

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

As you can see, the output results are the same. I still don't know the differences between the two writing methods. The operation that applies this change to the preceding arrays also outputs the same result.

In this way, the actual results of several examples have been answered. Then I went on to study it again. I can't know why.

From the above example, we can see that both jQuery and jQuery objects have implemented this method. For jQuery objects, we simply delegate the each method: pass the jQuery object as the first parameter to jQuery's each method.

Let's take a look at the each implementation in jQuery.(Network excerpt)

Function (object, callback, args) {// This method has three parameters: object obj for operation, function fn for operation, function parameter argsvar 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] gets the first DOM element in the jQuery object through the for loop, obtain each DOM element in the entire jQuery object and Use callback. call (value, I, value); direct this object of callback to the value object and pass two parameters. I indicates the index value and value indicates the DOM element; among them, callback is similar to function (index, elem ){...}. So we get $ ("..."). each (function (index, elem) {...}); */} return object ;}

Jquery will automatically judge based on the input element, and then take the apply or call method based on the judgment result. In the fn implementation, you can directly use the this pointer to reference arrays or child elements of objects.

1. The obj object is an array.

The each method calls the fn function one by one for the sub-elements of the array until the returned result of a sub-element is false. That is to say, we can process the fn function provided, the each method is called after certain conditions are met. When the each method provides the arg parameter, the incoming parameter of the fn function call is arg. Otherwise, it is a sub-element index and the sub-element itself.

2. The obj object is not an array.

The biggest difference between this method and 1 is that the fn method will be carried out 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 input parameters of the call are similar to those of 1.

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