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
//ARRAYS
var 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
//OBJECTS
var 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:
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.
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
|
jQuery(\'li\').each(function(i){
jQuery(this).delay(i*1500).fadeOut(1500,function(){
jQuery(this).css("background-color","orange");
});
});
|
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.
http://www.jquery4u.com/jquery-functions/jquery-each-examples/
|
