CSS-Plus
CSS-Plus
Play with web technologies

Master the jQuery for each loop

September 05, 2011
Attention: This article is old and the content is outdated. I've left the article here for historical purposes.

The jQuery for each loop can be very powerful. It is used just like any other jQuery function such as .click(), .hover(), etc. and it accepts a callback. As you know, or have probably guessed, the jQuery for each function loops over selected items and does whatever you'd like to targetted items.

You may be asking yourself:
But isn't that what CSS or jQuery selectors do anyway? What's the difference?

Standard jQuery for .each()

Not only does the jQuery for each function loop over each selected element, it also keeps track of the element index within the loop. For example: As you can see in the example, it's some very basic HTML with some very basic CSS. The jQuery is also relatively simple, I'm pretty sure you would be able to guess what is going on even if I didn't explain, but I will!

The above example is selecting all <li> elements and looping over them. It is then adding a class of 'item-' with its index value appended to it. The index begins at 0.

The $(this) keyword references each iterated element. This is where .each() becomes very useful.

I feel that's a pretty straight forward jQuery for each loop that you should be able to get the hang of pretty quickly if you're fairly familiar with jQuery.

The javascript for loop

If you're still pretty new to jQuery and you're feeling adventurous, how about throwing in a javascript for loop instead of a jQuery for each loop? 'Why' you ask? Well because it is much faster.

While you won't notice the difference on small scripts and pages, it could make a difference while looping through many items and even other loops. It's also never a bad thing to learn some javascsript when you can.

Personally I prefer doing this. It certainly isn't much more complicated than the jQuery version.

Alright, how is $.each() any different?

If you didn't already know, there is another jQuery for each function, but it's not the same as the one we've already covered. The $.each() function loops over items in an array or items in an object. I didn't run into arrays or objects until quite a while after I was comfortable with jQuery, so don't feel left out if you don't know what's going on. I suggest having a look at the jQuery fundamentals page. It covers basic javascript and helps you use jQuery to it's full potential.

Back to the point: how would we use $.each()? Without further ado, here's an example!

In this example I've used an object instead of an array, but they both work pretty much the same way. First the object obj is declared with a couple of random key and value values. It is then looped over using the jQuery function. As an example, I've appended the values to a div and also used the key as the class of each paragraph.

Conclusion

As you can see, there isn't much to jQuery or javascript for each loops! Save time and make your life more simple by making use of them!