Jquery's each () details, jqueryeach

Jquery's each () details, jqueryeach

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.

 

[Processing one-dimensional arrays with each]

1 var arr1 = ["aaa", "bbb", "ccc"]; 2 $. each (arr1, function (I, val) {3 alert (I); // output 0, 1, 24 alert (val); // output aaa, bbb, ccc5 });

 

[Processing two-dimensional arrays with each]

1 var arr2 = [['A', 'aaa', 'aaa'], ['B', 'bbb', 'bbb'], ['C ', 'cc', 'ccc '] 3 $. each (arr, function (I, item) {4 alert (I); // The output is 0, 1, 2, because the two-dimensional array contains three array elements: 5 alert (item ); // The output is ['A', 'aaa', 'aaa'], ['B', 'bbb', 'bbb'], ['C ', 'cc', 'ccc '] 6 });

Arr2 is a two-dimensional array,

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.

[After the processing of the two arrays is slightly changed]

1 var arr = [['A', 'aaa', 'aaa'], ['B', 'bbb', 'bbb'], ['C ', 'cc', 'ccc '] 2 $. each (arr, function (I, item) {3 $. each (item, function (j, val) {4 alert (j); // The output is 0, 1, 2, 0, 1, 1, 25 alert (val ); // output is a, aa, aaa, B, bb, bbb, c, cc, ccc6}); 7 });

 

[Each processes json data] This each is even more powerful and can loop through every attribute.

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

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].

 

[Processing dom elements using ecah] Here is an input form element as an example.

If you have such code 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 the each as follows:

1 $. each ($ ("input: hidden"), function (I, val) {2 alert (val); // output [object HTMLInputElement] because it is a form element. 3 alert (I); // The output is 0, 1, 2, 3, 4 alert (val. name); // output aaa, bbb, ccc, and ddd. If you use this. name will output the same result 5 alert (val. value); // output 111,222,333,444, if this. value will output the same result 6 });

 

If you change the code above to the following format:

1 $("input:hidden").each(function(i,val){2     alert(i);3     alert(val.name);4     alert(val.value);       5 });

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.

 

See the implementation of each in jQuery (Network excerpt)

1 function (object, callback, args) {2 // This method has three parameters: object to be operated obj, function to be operated fn, function parameter args 3 var name, I = 0, length = object. length; 4 if (args) {5 if (length = undefined) {6 for (name in object) {7 if (callback. apply (object [name], args) === false) {8 break; 9} 10} 11} else {12 for (; I <length ;) {13 if (callback. apply (object [I ++], args) === false) {14 break; 15} 16} 17} 18} else {19 if (length = un Defined) {20 for (name in object) {21 if (callback. call (object [name], name, object [name]) === false) {22 break; 23} 24} 25} else {26 for (var value = object [0]; I <length & callback. call (value, I, value )! = False; value = object [++ I]) {} 27/* object [0] gets the first DOM element in the jQuery object through the for loop, 28. Get each DOM element in the jQuery object and Use callback. call (value, I, value); 29. Point this object of callback to the value object and pass two parameters. I indicates the index value and value indicates the DOM element; 30. callback is similar to function (index, elem ){...}. 31, so we get $ ("... "). each (function (index, elem ){...}); 32 */33} 34} 35 return object; 36}

 

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.

 

-- Non-original