Guidelines for using the $each () method in jquery

Source: Internet
Author: User
Tags arrays json

Each function in JQuery is handy, and the $.each () function encapsulates a very powerful traversal function that traverses one-dimensional arrays, multidimensional arrays, DOM, JSON, and so on, and using $each in JavaScript development can greatly reduce our workload, Here is a simple imitation of each of the functions, can only handle the array type of objects.

$.each () and $ (selector). each () differs in that the latter is dedicated to the traversal of the jquery object, which can be used to traverse any set (whether an array or an object), and, if it is an array, the callback function passes in the index of the array and the corresponding value (values can also be obtained through the This keyword). , but JavaScript always wraps the this value as an object--albeit a string or a number--and the method returns the first parameter of the object being traversed.

The each () method makes the DOM loop structure simple and error-prone. The each () function encapsulates a very powerful traversal feature that is also handy for traversing one-dimensional arrays, multidimensional arrays, DOM, JSON, and so on

Using $each in the JavaScript development process can greatly reduce our workload.

Here are a few common uses for each

Each process one-dimensional array


1 2 3 4 5 var arr1 = ["AAA", "BBB", "CCC"]; $.each (arr1, function (i,val) {alert (i); alert (val);});

alert (i) outputs the 0,1,2

Alert (val) outputs the AAA,BBB,CCC

Each process two-dimensional array


1 2 3 4 5 var arr2 = [[' A ', ' AA ', ' aaa '], [' B ', ' BB ', ' BBB '], [' C ', ' cc ', ' CCC ']] $.each (arr, function (I, item) {alert (i); alert (i)   TEM); });

ARR2 is a two-dimensional array, the item is equivalent to taking each of the arrays in the two-dimensional array.

Item[0] Relative to the first value in each one-dimensional array

Alert (i) will output as 0,1,2 because the two-dimensional array contains 3 array elements

Alert (item) will output as [' a ', ' AA ', ' aaa '],[' b ', ' BB ', ' BBB '],[' C ', ' cc ', ' CCC ']

After a slight change to the processing of this two-bit array


1 2 3 4 5 6 7 var arr = [[' A ', ' AA ', ' aaa '], [' B ', ' BB ', ' BBB '], [' C ', ' cc ', ' CCC ']] $.each (arr, function (I, item) {$.each (item,func     tion (j,val) {alert (j);  Alert (val); }); });

Alert (j) will output as 0,1,2,0,1,2,0,1,2

Alert (val) will output as A,AA,AAA,B,BB,BBB,C,CC,CCC

Each process JSON data, which is more powerful and can loop through each attribute


1 2 3 4 5 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) outputs the one,1,two,2,three,3

Here's why key is not a number but a property, because the JSON format is a set of unordered attributes-values, since the disorder, how to figure it.

And this val is equivalent to Obj[key]

ECAH handles DOM elements, as an example of an input form element.

If you have a section of this code in the DOM


1 2 3 4 <input name= "AAA" type= "hidden" value= "the/> <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 of the following


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

Then alert (val) Outputs [object Htmlinputelement] because it is a form element.

Alert (i) will output as 0,1,2,3

alert (; will output aaa,bbb,ccc,ddd, if using will output the same result

alert (Val.value); Will output 111,222,333,444 if using This.value will output the same result

If you change the previous code to the following form


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

As you can see, the output results are the same, as for the difference between the two ways of writing, I also do not know. The operation of this change to the array above will also output the same result.

In this way, the actual results of several examples have been answered. And then continue to study, always do not know the reason why.

As you can tell from the examples above, jquery and jquery objects all implement this method, and for jquery objects, simply delegate each method: The jquery object is passed as the first parameter to jquery's each method.

Look at each implementation in jquery (network excerpt)


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 The

jquery automatically judges the incoming elements and then takes the apply or call method based on the results of the judgment. In the implementation of FN, the this pointer can be used directly to refer to an array or a child element of an object.

1.obj objects are arrays

Each method invokes the FN function of the neutron element of the array, until the result returned by a call to a child element is false, that is, we can exit each method call when the supplied FN function is processed so that it satisfies a certain condition. When the arg argument is supplied by the each method, the argument passed in by the FN function is arg, otherwise: the child element Index, the child element itself

2.obj object is not an array

The biggest difference between this method and 1 is that the FN method is carried out without regard to the return value. In other words, all the properties of the Obj object are invoked by the FN method, even if the FN returns false. Calling incoming arguments is similar to 1.

The above mentioned is the entire content of this article, I hope you can enjoy.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

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: and provide relevant evidence. A staff member will contact you within 5 working days.