Have you ever had to manually code something that is sequential? Didn't you find it annonying? Well, here is a simple solution for you. This tutorial will show you how to use jQuery to add a sequent of CSS classes to create a graphical list. The second example will show you how to add a comment counter to a comment list using jQuery's prepend feature.
1a. Insert jQuery Code
First, download a copy of jQuery. In between the <head> tag, insert the jQuery code:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#step li").each(function (i) {
i = i+1;
$(this).addClass("item" i);
});
});
</script>
The jQuery will output the source code as:
1b. CSS Code
Style the <li> element with a background image accordingly (step1.png, step2.png, step3.png, and so on..).
#step .item1 {
background: url(step1.png) no-repeat;
}
#step .item2 {
background: url(step2.png) no-repeat;
}
#step .item3 {
background: url(step3.png) no-repeat;
}
2a. Add Sequential Content
You can also use this technique to add sequential content using jQuery's prepend feature. The following example shows how you can add a counter number to a comment list.
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#commentlist li").each(function (i) {
i = i+1;
$(this).prepend('<span class="commentnumber"> #' i '</span>');
});
});
</script>
The code will add the <span class="commentnumber"> tag (with # + 1) to each <li> tag.
2b. CSS
Style the <li> element with position:relative and use position:absolute to place the .commentnumber to the top right corner.
#commentlist li {
position: relative;
}
#commentlist .commentnumber {
position: absolute;
right: 0;
top: 8px;
}
Hi,
It’s not really about this trick but i am trying to add a onClick event to a link with a sequential variable.
The code I use is
$(document).ready(function(){
$(‘.imgvign a’).each(function (i) {
i = i+1;
$(‘.imgvign a’).bind(‘click’, function(){return viewer.show()});
});
});
This way it works. My links got the onClick event but if i want {return viewer.show(i)}, it doesn’t work and just link to the last. I have 14 elements and i got each the same 14 number.
I tried
$(document).ready(function(){
$(‘.imgvign a’).each(function (i) {
i = i+1;
});
$(‘.imgvign a’).bind(‘click’, function(){return viewer.show(i)});
});
but it doesn’t work.
So How can i have an increment of all the event like
return viewer.show(0), return viewer.show(1), return viewer.show(2)…
And by the way, how can i start the increment to sort 0 and after 1, 2, 3…
I hope someone could help me with that.
Thanks for answer and for your very useful blog.
ehehehe :):):)
Why
thanks so much for this sweet piece of code i’ve been searching for so long!
Very neat and clean trick. The idea is simply awesome, but that title should be CSS Sequential List, as it can be done even without jQuery.
@Smashing Themes: I’m pretty sure that the point here is to NOT have to hard-code the individual class names into the HTML, so the jQuery is completely necessary to accomplish this. Check out what the first paragraph of the article says for confirmation. Remember, you need to actually read the article to get the context, not just look at the examples.
Hey,
Just wondering how to do this with two ol’s with the same class. I’d like it to be for example
#1 – something
#2 – something
#3 – something
then start again from the beginning at the next ol
#1 – something
#2 – something
#3 – something
Any ideas? At the moment, the numbers just keep going – 1,2,3,4,5,6 into the next ol rather than starting again
Hello, i tried out the 1a code snippet as above and it didn’t work. I asked a colleague to help me and he pointed out a syntax error, your example above has a missing + as follows: $(this).addClass(“item”+i);
very nice job thank you
@Charles Boyung
I read the article first, then I posted the comments :), I meant applying classes on element in loop can be done with native Javascript, you don’t actually have to include a JS library to do so.
Lovely! Thanks for this jQuery boost, with comment #88 from Chris, it was the elegant solution I was looking for. Tks!
Your tut is useful and easy to read. Thank you.
Great Tutorial!
But one question: Do you have the psd’s of the “step”-buttons. They are so cute, I would love to use them in other projects…
Very neat and clean trick.
Great , jQuery Sequential List
Great article. CSS saved web design
Cyrus
Visit http://www.psdtoxhtmlcoder.com
@palance
Replying #87, I have this problem too. I believe you have to modify the code a bit. In this tutorial it only loops through the <li> element. That’s why the number doesn’t reset at another <ol> element. I guess……just add another loop for <ol>, like…”for each” <ol>, we loop the <li>.
I’m a newbie of jQuery, but seems like the below code had solved the problem,
$('ol#step').each(function () {
$(this).find('li').each(function (i) {
i = i+1;
$(this).addClass('item' + i);
});
});
Hope this helps.
I’m looking forward to a cleaner solution too~~
I would be a bit careful with this one, make sure that the sequential programming generated by JQuery only is for presentation, and not content. :-)
very nice job
usefulll tks !
very nice ideas :) made me look at some stuff a bit differently, thanks for the great info!