I’ve started working with the Javascript framework jQuery lately and I must say that I find it very enjoyable! I have previously mostly used Prototype and DOMAssistant, and although they excel in some areas I somehow find jQuery more fun to code with.
Here’s a simple tip on how to loop through elements with jQuery that I thought I’d share.
An example
We start with a simple unordered list.
<ul id="my_list">
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
What we want to do now is to change the color of each list item to red. With regular DOM scripting this would probably take a few lines of code but with jQuery we need just one.
$('#my_list li').css('color', 'red');
This would result in:
- Item
- Item
- Item
If you want to do something a little more fancy, like something different with each item, you have to write a little more code, but not much. First you have to grab the the list elements like in the previous example by using selectors. By using the each() method, you are then able to loop through each item. By assigning an anonymous function to each() you get access to every individual item by using $(this).
Notice that in the anonymous function there’s an attribute i. That’s the number of each item, just like in any normal array, starting from 0 and incrementing.
$('#my_list li').each(function(i) {
$(this).append(i.toString());
});
The result is a list with the item number attached to the text inside the elements like this:
- Item0
- Item1
- Item2
The really cool thing about this is that each iteration has it’s own function scoop. If you ever tried to do this with regular DOM scripting and a standard for loop you’ve most likely ran into some kind of scoop problem when dynamically assigning values to an object. They all end up getting the same value. jQuery elegantly solves this and makes you’re coding life a little bit easier.
Pretty cool don’t you think? Happy coding!
January 7, 2009 at 9:34 pm
Thanks for the article… helped me do this:
————————————-
$(‘#my_list li’).each(function()
{
$(this).mouseover(function()
{
$(‘#my_list li’).removeClass(“selected”);
$(this).addClass(“selected”);
})
})
———————————–
Can you think of anyway to shorten this?
Thanks
January 7, 2009 at 10:24 pm
I think that there’s a fundamental flaw in your code. Surely you want the class to be appended only when the mouse hovers over it? In that case you could write it like this, but it’s actually longer than your code 🙂
$('#my_list li').each(function() { $(this).hover(function() { $(this).addClass('selected'); }, function() { $(this).removeClass('selected'); }); });But on the other hand it’s better to achieve this with pure CSS. Then it gets really short.
#my_list li:hover { /* Whatever style you want it to have */ }November 22, 2009 at 3:45 am
Thank you for this!! (I knew there was an elegant solution.)
November 22, 2009 at 3:46 am
ps: My implementation:
var apptDetails='undefined'; function get_selected_values() { jQuery(document).ready(function($) { apptDetails='' + "n"; $("select").each(function(i){ var v=$(this).val(); if (v != 'none selected') { apptDetails = apptDetails + v + "n"; }; }); }); }November 23, 2009 at 8:33 am
Michel: There’s almost always an elegant solution in jQuery! Got to love it! One thing to be aware of though is that if performance is an issue, you are better of with regular for-loops.
August 19, 2010 at 8:58 pm
$(‘#my_list li’).each(function(i) {
$(this).append(i.toString());
});
* Item0
* Item1
* Item2
Instead i want to get
* Item1
* Item2
* Item3
How to achieve the same???
August 20, 2010 at 6:31 pm
Santosh: It’s easy, you just add 1 to i each iteration.
$('#my_list li').each(function(i) { $(this).append(i + 1); });February 3, 2012 at 9:33 pm
Can I use this to loop through a bulleted list in which I want to hide 2 of the dynamic results? The bulleted list is based on an ID and a Question. One Question has 4 answers, one question uses the same answers, but I only need 2 of the 4 responses to be shown. Is this possible?