Jquery each usage

Source: Internet
Author: User

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

 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.