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.
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(arr2, 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 arr2 = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']] $.each(arr2, 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
Each processes simple json data
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 1, 2, 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].
Each processes complex json data
var obj = { "username": "andy", "age": 20, "info": { "tel": "123456", "cellphone": "98765" }, "address": [ { "city": "beijing", "postcode": "222333" }, { "city": "newyork", "postcode": "555666" } ] } $.each(obj, function (key, val) { alert(key); alert(val); });
Here alert (key) will output username, age, info, address
Alert (val) will output andy, 20, [object], [object] [object]
Why is the object returned? Because the value of info and address is jason, I want to read it and continue to traverse it.
Ecah processes dom elements
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
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); });
Same output