jQuery’s two .each() methods are similar in nature, but differ in level of functionality
Some may find it difficult to understand the difference between jQuery.each() and jQuery().each(). Perhaps the easiest way to understand the difference is to start with jQuery().each(). This method can only be used against a jQuery collection. So when you do this: jQuery(‘#someDiv p’).each(), what you are saying is: “for EACH paragraph that is inside of the element with the ID of “someDiv”, I want to do something. That’s it.
The jQuery.each() method is a static method of the jQuery object. This means that it is just a method that’s out there for you to use, and you need to give it a little more info. But there is a bigger payoff with this method: it can be used to iterate over different kinds of things, not just a jQuery collection.
The syntax for the jQuery.each() method is also simple:
|
1 |
jQuery.each(OBJECT,CALLBACK) |
So, OBJECT can be an object, an array, an array-like object or even a jQuery collection. How cool is that? The CALLBACK is a function that will be run against each element in the first argument. The super-star feature here is that the first argument can be a jQuery DOM collection. This means that jQuery.each() can do ANYTHING that jQuery().each() can do. Let’s jump into some code:
jQuery().each()
Example # 1.A
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<ul> <li>monday</li> <li>tuesday</li> <li>wednesday</li> <li>thursday</li> <li>friday</li> <li class="weekend">saturday</li> <li class="weekend">sunday</li> </ul> <script> jQuery('li').each(function(index, value) { jQuery(this).css('background-color','yellow'); }); jQuery('li.weekend').each(function(index, value) { jQuery(this).css('color','red'); }); </script> |
In Example # 1.A, we have an unordered list, with the days of the week as list items. The last two have the “weekend” class applied. We use the $().each() method twice. In the first run, it will iterate over every one of the list items. In the second run, the jQuery collection contains only the last two list items because they have the “weekend” class.
In both cases though, we can see how the $().each() method does one thing and does it well: it iterates over a jQuery collection. Inside of that collection, we use $(this) to get a reference to the current element being iterated over.
Here is the JSFiddle Link for Example # 1.A: http://jsfiddle.net/wcRmd/
Example # 1.B
|
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 |
<ul class="music"> <li>jazz</li> <li class="skip">blues</li> <li>rock</li> <li class="skip">country</li> <li>techno</li> <li>metal</li> </ul> <script> jQuery('li').each(function(index,element) { //element = 'this' //ignore elements with the 'skip' class if( jQuery(element).hasClass('skip') ){return}; jQuery(element) //show the index .text( jQuery(element).text() + ' -> ' + index) .css({ 'background-color' : 'yellow', 'font-size' : '22px', 'font-family' : 'arial' }); }) </script> |
In Example # 1.B, we take advantage of two additional features that the jQuery().each method has to offer. The callback takes two optional arguments: the index of the current element being iterated over, and the element itself. In our example, we add the index of each element to its text, and we do so by referencing ‘element’ instead of ‘this’. Keep in mind that ‘element’ is just what we decided to name that argument variable. We could just have easily named it ‘foo’ or ‘glove’. It doesn’t matter what you name these variables, just as long as you are aware of what they are.
We also used the .hasClass() method to see if each element had the “skip” class. This was just a way to illustrate the fact that while you CAN do things to each element inside of the callback function, you can also choose not to. There are numerous ways that you can organize this kind of logic. Using the ‘skip’ class was merely a ‘quick and dirty’ approach.
Here is the JSFiddle Link for Example # 1.B: http://jsfiddle.net/9C8He/
jQuery.each()
Example # 2.A
|
1 2 3 |
jQuery.each(['monday', 'tuesday', 'wednesday'], function(index, value) { console.log(value); }); |
In Example # 2A, we pass-in two arguments to the static jQuery.each() method: an array and an anonymous callback function. The array has three elements, and the callback merely outputs the value of each array element to the console. Pretty simple stuff.
Here is the JSFiddle Link for Example # 2.A: http://jsbin.com/epanov/1/edit
Example # 2.B
|
1 2 3 4 5 6 7 8 9 10 |
var data = { name: 'R Jones', accountNumber: 10203, phoneHome: '212-555-1212', phoneMobile: '212-555-1313' }; jQuery.each(data, function(index, value) { console.log(index + ': ' + value); }); |
In Example # 2.B, we provide an object as the first argument to the jQuery.each() method. When iterating over an object, the jQuery.each() method will return the property name for ‘index’. This is a brilliant approach, as it provides a very flexible alternative to the native JavaScript “for/in” loop.
Here is the JSFiddle Link for Example # 2.B: http://jsbin.com/examuz/1/edit
Example # 2.C
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<ul> <li>monday</li> <li>tuesday</li> <li>wedesday</li> <li>thursday</li> <li>friday</li> <li class="weekend">saturday</li> <li class="weekend">sunday</li> </ul> <script> $.each( $('li.weekend'), function(index, value) { //value = 'this' $(value) .text( $(value).text() + ' -> ' + index) .css('color','red'); }); </script> |
In Example # 2.C, we provide a jQuery DOM collection as the first argument to the jQuery.each() method. Essentially, this is just like using the jQuery().each() method. Inside of the callback function, ‘index’ can be used to get a numerical reference to the current element being iterated over, and ‘value’ will be the element itself. Brilliant.
NOTE: You may wonder why the last two elements have indexes of 0 and 1 respectively. This is because we specified that list items with the ‘weekend’ class should be returned in the collection. So, our jQuery collection object contains only two elements (‘saturday’ and ‘sunday’).
Here is the JSFiddle Link for Example # 2.C: http://jsfiddle.net/XjxvZ/
Summary
In this article we learned the difference between the jQuery.each() and jQuery().each() methods. We also discovered that while they do differ, the jQuery.each() is flexible enough to provide the same functionality as jQuery().each() if needed.
