OK, this is quite an extensive overview of the jQuery .each() function. This is one of jQuery’s most important and most used functions so that’s the reason why I’ve chosen to go into such detail about it and really get down and dirty about how to use it to it’s full useful potential!
Firstly, what is jQuery .each()
Basically, the jQuery .each() function is used to loop through each element of the target jQuery object. Very useful for multi element DOM manipulation, looping arrays and object properties.
jQuery .each() Syntax
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
//DOM ELEMENTS$("div").each(function(index, value) { console.log('div' + index + ':' + $(this).attr('id')); });//outputs the ids of every div on the web page//ie - div1:header, div2:body, div3:footer//ARRAYSvar arr = [ "one", "two", "three", "four", "five" ];jQuery.each(arr, function(index, value) { console.log(this); return (this != "three"); // will stop running after "three" });//outputs: one two three//OBJECTSvar obj = { one:1, two:2, three:3, four:4, five:5 }; jQuery.each(obj, function(i, val) { console.log(val); });//outputs: 1 2 3 4 5 |
For a more advanced jQuery.each example see Create Text Excerpts for Paragraphs on your web page.
1. Basic jQuery.each() Function Example
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
$('a').each(function(index, value){ console.log($(this).attr('href'));});//outputs: every links href element on your web page$('a').each(function(index, value){ var ihref = $(this).attr('href'); if (ihref.indexOf("http") >= 0) { console.log(ihref+'<br />'); }});//outputs: every external href on your web page |
eg – if you had the following links anywhere on your web page:
|
1
2
3
|
|
It would output:
2. jQuery.each() Array Example
|
1
2
3
4
5
|
var numberArray = [0,1,2,3,4,5];jQuery.each(numberArray , function(index, value){ console.log(index + ':' + value); });//outputs: 1:1 2:2 3:3 4:4 5:5 |
3. jQuery.each() JSON Example
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
(function($) {var json = [ { "red": "#f00" }, { "green": "#0f0" }, { "blue": "#00f" }];$.each(json, function() { $.each(this, function(name, value) { /// do stuff console.log(name + '=' + value); });});//outputs: red=#f00 green=#0f0 blue=#00f})(jQuery); |
Also see 10 Example JSON Files.
4. jQuery.each() Class Example
This example shows you how to loop through each element with class=”productDescription” given in the HTML below.
Update: 19/03/13 – This jsfiddle shows you the object types returned by $.each() if your confused about [object HTMLDivElement] it should help clear it up.
|
1
2
3
|
<div class="productDescription">Red</div><div class="productDescription">Orange</div><div class="productDescription">Green</div> |
|
1
2
3
4
|
$.each($('.productDescription'), function(index, value) { console.log(index + ':' + value); });//outputs: 1:Red 2:Orange 3:Green |
You don’t have to include index and value these are just parameters which help determine which DOM element your currently iterating. You could also write it like this:
|
1
2
3
4
|
$.each($('.productDescription'), function() { console.log($(this).html());});//outputs: Red Orange Green |
5. jQuery.each() Delay Example
Click to see it in action
This is awesome! Look up at the menu at the top as this contains the first list items on the page!.
|
1
2
3
4
5
6
7
8
|
jQuery('#5demo').bind('click', function(e){ jQuery('li').each(function(i) { jQuery(this).css("background-color","orange"); jQuery(this).delay(i*200).fadeOut(1500); });}); |
Conclusion
Make use of the .each function as much as you can because it’s fast and will save you heaps of time!
Remember: $.each() and $(selector).each() are two different methods defined in two different ways, one with jQuery.each = function and the other with jquery.fn.each = function.
Note: the console.log() commands are just for use with firebug.