jQuery.each( array, callback )Returns: Object
Description: A generic iterator function, which can be used to seamlessly iterate over both objects and arrays. Arrays and array-like objects with a length property (such as a function's arguments object) are iterated by numeric index, from 0 to length-1. Other objects are iterated via their named properties.
-
version added: 1.0jQuery.each( array, callback )
-
arrayType: ArrayThe array to iterate over.
-
callbackThe function that will be executed on every object.
-
-
version added: 1.0jQuery.each( object, callback )
-
objectType: ObjectThe object to iterate over.
-
callbackThe function that will be executed on every object.
-
The $.each()
function is not the same
as $(selector).each(), which is used to iterate, exclusively, over a jQuery object. The $.each()
function
can be used to iterate over any collection, whether it is an object or an array. In the case of an array, the callback is passed an array index and a corresponding array value each time. (The value can also be accessed through the this
keyword,
but Javascript will always wrap the this
value as an Object
even
if it is a simple string or number value.) The method returns its first argument, the object that was iterated.
Note: The $.each()
function
internally retrieves and uses the length
property of the passed collection. So, if
the collection has a property called length
— e.g. {bar:
'foo', length: 10}
— the function might not work as expected.
1
2
3
|
|
This produces two messages:
0: 52
1: 97
If an object is used as the collection, the callback is passed a key-value pair each time:
1
2
3
4
5
6
7
|
|
Once again, this produces two messages:
flammable: inflammable
duh: no duh
We can break the $.each()
loop at a particular
iteration by making the callback function return false
. Returning non-false is
the same as a continue
statement in a for loop; it will skip immediately to the next
iteration.
Examples:
Example: Iterates through the array displaying each number as both a word and numeral
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
|
Demo:
Example: Iterates over items in an array, accessing both the current item and its index.
1
2
3
|
|
Example: Iterates over the properties in an object, accessing both the current item and its key.
1
2
3
|
|
.each()
.each( function )Returns: jQuery
Description: Iterate over a jQuery object, executing a function for each matched element.
-
version added: 1.0.each( function )
-
functionA function to execute for each matched element.
-
The .each()
method is designed to make
DOM looping constructs concise and less error-prone. When called it iterates over the DOM elements that are part of the jQuery object. Each time the callback runs, it is passed the current loop iteration, beginning from 0. More importantly, the callback is
fired in the context of the current DOM element, so the keywordthis
refers to the element.
Suppose you have a simple unordered list on the page:
1
2
3
4
|
|
You can select the list items and iterate across them:
1
2
3
|
|
A message is thus logged for each item in the list:
0: foo
1: bar
You can stop the loop from within the callback function by returning false
.
Note: most jQuery methods that return a jQuery object also loop through the set of elements in the jQuery collection — a process known as implicit iteration. When this
occurs, it is often unnecessary to explicitly iterate with the .each()
method:
1
2
3
4
5
6
7
|
|
Examples:
Example: Iterate over three divs and sets their color property.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
|
Demo:
Example: To access a jQuery object instead of the regular DOM element, use $(
this )
. For example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
|
Demo:
Example: Use return
false
to break out of each() loops early.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
|