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.

View Demo Sequential List

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">
  $("#step li").each(function (i) {
    i = i+1;
    $(this).addClass("item" i);


The jQuery will output the source code as:

code explain

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;

step list

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">
  $("#commentlist li").each(function (i) {
    i = i+1;
    $(this).prepend('<span class="commentnumber"> #' i '</span>');


The code will add the <span class="commentnumber"> tag (with # + 1) to each <li> tag.

code explain

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;

commentlist counter


Feb 9, 2009 at 4:45 am

nice, thx for this article

Feb 9, 2009 at 4:48 am

thx, a very useful article!

Feb 9, 2009 at 4:53 am

Such a simple solution – Thanks!

Just one thing in your JS code:
“i = i+1;”
Change it to “i++” to make it shorter :) .

Feb 9, 2009 at 5:00 am

Thanks that’s very useful

Feb 9, 2009 at 5:03 am

Nice, but this really shouldn’t be done using JavaScript.

Feb 9, 2009 at 5:20 am

As ~James noticed – depending design on JS IMHO is not good idea. Why don’t you use CSS3 selectors (nth-child)?

Of course, older browsers won’t understand it, but logic are still semantic. I think, the best thing nowadays is generating adequate classes on the server-side. Alternatively, you may use IE’s expression and CSS3 selectors. ;)

Feb 9, 2009 at 5:21 am

The simple ‘ul’ and ‘li’ codes can make a lot of arts.

Feb 9, 2009 at 5:28 am

If you use wordpress or other CMS’s you can use those, so why using JS on a site? If it’s turned off, you’ll end up with nothing?

I prefer using JS for motion and such… This way the site still remains functional, is JS is turned off.

Feb 9, 2009 at 5:41 am


fred soler
Feb 9, 2009 at 5:59 am

Very usefull.
Nice effect.

Feb 9, 2009 at 6:32 am

It’s a nice simple solution. Personally, I don’t see that there’s a problem using javascript if the end result is an enhancement to the user interface (progressive enhancement). If someone has javascript turned off the page will still be usable (although it won’t be as pretty).

Thanks for sharing.

Feb 9, 2009 at 7:01 am

wicked tutorial, thanks

Steve Killen
Feb 9, 2009 at 7:56 am

There are much better uses for JQuery then just accomodating laziness. Though surely the effort to do this if you aren’t already using JQuery on the site is about the same as adding in those classes.

I think the javascript code would be better off at the end of the document as well.

joyoge designers' bookmark
Feb 9, 2009 at 8:28 am

Nice effect thanks..

Feb 9, 2009 at 9:30 am

Cool tutorial, but as what it seems a lot of other people are saying: why use js? Regardless, it’s still a great tutorial!

– Greg

Feb 9, 2009 at 10:40 am

Very cool, and pretty easy too. Thanks!

Feb 9, 2009 at 10:41 am

thanks… Very useful….

Feb 9, 2009 at 11:11 am

Now I can be super lazy!!

DKumar M.
Feb 9, 2009 at 11:12 am

Nice Tutorial Nick. Thanks for sharing !!

Feb 9, 2009 at 11:55 am

Thanks for the article. Jquery is truly wonderful!

Feb 9, 2009 at 1:06 pm

how well does this scale? i am guessing, not well.

Feb 9, 2009 at 1:21 pm

Nice, efficient little enhancement! Building on what @Marco said, you could even trim it down to one line if you wanted:

$(“#step li”).each(function (i) {
$(this).addClass(“item” + (++i));

Jan Wilson
Feb 9, 2009 at 1:48 pm

Great article. I also found some great jQuery information at http://www.jquerybasics.com

jacob schulke
Feb 9, 2009 at 3:38 pm

a lot of people seem to being saying this is a way to be lazy. to me this seems like the best way to make user generated content (or cms content) to look as part of a well thought out uniformed designed site, when so often it does not. thanks for sharing Nick.

Feb 9, 2009 at 6:44 pm

Muito bom cara, gostei.
Porém uso o PHP para isso, para mim é mais facil, mais a dica acima é valida

eddie yang
Feb 9, 2009 at 10:06 pm

The idea is awesome,I would try to do such next time.

Feb 10, 2009 at 12:28 am

super article. i will try it 2day. thanks.

Feb 10, 2009 at 6:08 am

Wow! Thanks for this very helpful tutorial!

Feb 10, 2009 at 7:19 am

I wonder what the advantage is of this way of working

i can see only one…
if you send 10 comments over from the server to the user, you have
10 times <span class=”commentnumber”> #1</span>
witch if you have large amounts of comments is faster to generate the number on the userside.
but i was wondering is there any other advantage to this usage?
because if it were only 10 comments (like on lots of blogs)
or paged comments (10 per page)
then this does not give that mutch of a speed differance right?

so if anyone can shed some light here i’d appriciate it

Feb 10, 2009 at 8:04 am

I see, jQuery is useful :)

and here is a nice example for refreshing old html codes….

Feb 10, 2009 at 8:28 am

I like the concept – just not sure if it serves a purpose which there is already a simple solution for?

Isn’t this what ordered lists are for? For example 1 if you defined the ordered list with a class of ‘steps’ you could access it directly and put one background image in place instead of bandwidth consuming individual ones? Atleast, that is the case if as in your example the only thing that is changing is the text that could be identically styled in html or via sifr.

mike in africa
Feb 10, 2009 at 9:23 am

Just a caution with this approach, (over)doing this will make it difficult for other designers/developers working on the same design as they need to be looking at javascript files for css hooks which will not be immediately apparent…

Feb 10, 2009 at 10:21 am


Feb 10, 2009 at 10:46 am

Thakns, is great tutorial

Elizabeth K. Barone
Feb 10, 2009 at 11:15 am

Nice idea, and a nice example of how we can implement the same thing many ways.

Elizabeth K. Barone
Feb 10, 2009 at 11:18 am

Hey Nick, how did you do the comment guidelines above the comment box? Something like that on one of my sites would be really useful. Can you email me if you have an extra moment?

Soh Tanaka
Feb 10, 2009 at 1:00 pm

This is really great! Thank you!!

Feb 10, 2009 at 3:50 pm

Regarding comment #34:

You mean like this?

.commentbox {
border-top-width: medium;
border-top-style: solid;
border-top-color: #666666;

Feb 10, 2009 at 3:53 pm

Nevermind, I see what you’re talking about…. I misunderstood. You mean like this: http://plugins.jquery.com/project/accordion

Michel Morelli
Feb 10, 2009 at 6:44 pm

Great article. I have write about this in my drupal/ajax site (tomorrow online).

Feb 11, 2009 at 8:54 am

Oh boy do I like this… i am new jquery but I like what i see.

TheFrosty @WPCult
Feb 11, 2009 at 8:59 pm

I have been playing with jQuery this week a lot, and I see what it is doing. It’s just taking me extra time to get it. But it is such a useful tool in generating CSS after the DOM has loaded!

Greg Wilker
Feb 11, 2009 at 11:07 pm

This is another reason why i need to take the time and learn javascript/jquery – so I can come up with great idea’s like this.

Feb 12, 2009 at 1:12 am

great jquery examples..

good work

Martin Greenwood
Feb 12, 2009 at 3:53 am

Very swish, I’ve always wanted to know how to do this, thanks very much for the information!

gareth hunt
Feb 12, 2009 at 5:50 am

I’d have done this with php rather than javascript.

Feb 12, 2009 at 7:41 pm

really nice and useful, thanks for the tip. best regards from Ralph (www.deprowebs.com)

Omair Rais
Feb 13, 2009 at 3:01 am

Thanks this is very useful and helpful.

Omair Rais

Feb 15, 2009 at 4:23 am

Great practical use of jQuery’s prepend() function. jQuery almost makes it too easy.

Feb 15, 2009 at 5:46 pm

I use this method on my Indonesia Blog ;)

Feb 16, 2009 at 12:40 pm

Nice post ! Very good ! Cool ! Tank´s

Feb 16, 2009 at 10:00 pm

I’ve always wanted to know how to do this, thanks

Feb 21, 2009 at 2:06 pm

What version of jQuery did you use? In local, width WordPress 2.7 jQuery version the sequential list doesn’t work.

Feb 21, 2009 at 2:11 pm

(I’m working width your html file)

Feb 21, 2009 at 2:21 pm

Ok, solved. jQuery.noConflict();

Amjad Iqbal
Feb 21, 2009 at 4:26 pm

this is very useful and helpful article! thank you.

Mar 2, 2009 at 7:35 pm

Yet another great quick tip, Thanks so much!

Pradeep CD
Mar 3, 2009 at 8:29 am

Great tutorial…

I will use this type listing in my website…

Thanks :)

Mar 3, 2009 at 7:19 pm

wow that’s great, good tutorial.. thanks

Web developer
Mar 5, 2009 at 1:41 pm

Thanks very nice post….

I am just starting to use jQuery….

Mar 7, 2009 at 9:20 am

Instead of writing,

$(“#step li”).each(function (i) {
i = i+1;
$(this).addClass(“item” i);

couldn’t we just change the background directly and not give it the class like,

$(“#step li”).each(function (i) {
$(this).css(“background” , “url(step” + i + “.png) no-repeat;”);

This will remove the need for us to specify classes like .item1, item2 …

Trey Cruz
Mar 10, 2009 at 6:17 pm

Is it possible to use this code to build a jquery photo gallery? Or is that a completely different deal?

Mar 12, 2009 at 9:13 am

very nice tutorial. is it possible that we could make the background create through a php snippet?

Mar 12, 2009 at 9:15 am

Trey Cruz, is it a trick question? or was it only me found it a self-answerable question?

Mar 14, 2009 at 3:26 pm

Awesome solution. Although, what if Javascript is turned off?

Mar 18, 2009 at 9:50 am

cool codes!

Mar 24, 2009 at 7:37 am

It looks pretty clean. I didn’t know about this feature. Thanks for this post! Keep it up!

Web Mahsülleri Ofisi
Mar 29, 2009 at 3:25 pm

Great tutorial. Thanks ;)

Apr 9, 2009 at 8:30 pm

@Adhip: it’s best to leave the styling in the CSS. this allows you to change your style/design where you normally would, rather than hunting down your styling in javascript code. but yes, you are technically correct.

May 3, 2009 at 12:56 am

Thanks and great post!

Just a little typo on the content: “.. find it annonying?”.

Keep it up!

May 6, 2009 at 9:37 am

Not sure if it’s been mentioned but Expression Engine has a built-in counter (and perhaps other CMS, that’s only my fav). So adding a sequential number to each item is easy. The gist of it would be

li class=”item{count}”

which would output

li class=”item1″
li class=”item2″

And if you don’t need all the extra markup on ever single li, you can use a conditional to target just one

if count == 5
li class=”item{count}”

Jeff Kee
Jun 29, 2009 at 2:07 pm

I’m building my company site and I’m getting a lot of great ideas from you here. These are RSS feeds worth keeping! Great application of the jQuery UI. I recently started using jQuery – had been using only Mootools before, but now I’m seeing the benefits and weaknesses of both engines.

Trey: Building a gallery out of jQuery is a totally different, and a deeper depth of coding. You’d have to incorporate a way to feed your images whether it be XML or just by plain HTML code, and then turn it into a Javascript masterpiece. Easiest thing to do – look up “Photo Gallery jQuery” on Google and you’ll see a LOT of different galleries already programmed for you!

Jul 6, 2009 at 1:55 pm

Thank you my friend …

Jul 29, 2009 at 6:24 am

Fantastic tutorial on these codes.
Cheers Eva

Jul 31, 2009 at 10:40 pm

This is a great article. Website owners often forget that it’s indeed about exposure to the content and not the website. A very usefull list with ‘old’ and new ways to promote your content and even drive sales.

Aug 8, 2009 at 5:24 am

Thanks Thanks What’s the problem here? Google could bury the meager profit number from even the biggest media conglomerates.

Aug 8, 2009 at 5:40 am

these are awesome!
thanks for putting in the effort to get this list together

Aug 8, 2009 at 6:19 am

Thank =)=)=) you http://www.cennet.gen.tr

Aug 10, 2009 at 9:29 am

Brilliant idea, love it :)

Brad Sherrill
Aug 11, 2009 at 8:56 am


Aug 11, 2009 at 3:22 pm

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

$(‘.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

$(‘.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.

Aug 11, 2009 at 4:18 pm

ehehehe :):):)

Aug 12, 2009 at 3:38 am


max bratsun
Aug 12, 2009 at 4:53 pm

thanks so much for this sweet piece of code i’ve been searching for so long!

Smashing Themes
Aug 13, 2009 at 2:15 am

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.

Charles Boyung
Aug 13, 2009 at 2:54 pm

@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.

Aug 14, 2009 at 4:10 am

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

Aug 14, 2009 at 8:38 am

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);

Aug 20, 2009 at 6:28 pm

very nice job thank you

Smashing Themes
Aug 24, 2009 at 2:17 pm

@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.

Alan Bristow
Aug 25, 2009 at 4:05 pm

Lovely! Thanks for this jQuery boost, with comment #88 from Chris, it was the elegant solution I was looking for. Tks!

Sep 4, 2009 at 4:46 am

Your tut is useful and easy to read. Thank you.

Sep 6, 2009 at 6:00 am

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…

Sep 10, 2009 at 8:04 pm

Very neat and clean trick.

Sep 21, 2009 at 9:17 am

Great , jQuery Sequential List
Great article. CSS saved web design
Visit http://www.psdtoxhtmlcoder.com

Oct 5, 2009 at 10:37 am


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~~

Richard Pergament
Oct 7, 2009 at 3:02 am

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. :-)

Oct 31, 2009 at 5:09 am

very nice job

Nov 12, 2009 at 6:35 am

usefulll tks !

Dec 15, 2009 at 6:55 pm

very nice ideas :) made me look at some stuff a bit differently, thanks for the great info!

Jan 6, 2010 at 1:43 am


Feb 28, 2010 at 4:43 am

Thanks for this great tutorial!
One thing though; remember to use the “string operator” when combining literals and variables: var variable = "text" + otherVariable + "more text";

Feb 28, 2010 at 4:59 am

Never mind… to me it is useless and makes no sense. You are using 3 different images for 1, 2, 3. Why not a single image for background and put the numbers in text?

Ya I know the font you are using for the “Step 1”, “Step 2”, “Step 3” may not be in the system and it has a little glow effect. For that I’ll use “Cufon” technology.

Also using css you can apply “Step 1” instead of “1” to OL (ordered list) or any elements

For an example:
body {
content:"Step " counter(step);

Mar 4, 2010 at 3:40 am

Thank.JQuery only is for presentation

Mar 27, 2010 at 7:28 am

Web Design
Apr 28, 2010 at 8:18 pm

very informative,…thank you:)

Kathryn Merlihan
May 11, 2010 at 1:34 pm

Excellent use of jQuery! I’m using this for all my ordered lists with sequential images. One thing to note for all you developers out there: There is a typo in figure 1a (above).

This line – $(this).addClass(“item” i); is missing the plus sign (+) between “item” and i. To get the above code working replace
$(this).addClass(“item” i); with

Still a great tutorial! Very clear and informative.


May 13, 2010 at 4:41 am

thanks for a great explained tutorial…

May 18, 2010 at 3:28 am


May 26, 2010 at 1:30 am

Very Nice post…

Jun 11, 2010 at 6:19 am

very cool well done

Jun 16, 2010 at 11:45 am

there are a error in the first example
the line:
$(this).addClass("item" i);
it generates a error, and perhaps don’t work
the correct is:
thanks a lot!

Jul 6, 2010 at 11:02 pm

Thank you so much ..
You are very cool

Izrada Web Stranica
Aug 31, 2010 at 11:19 am

Very Nice! THX!

Sep 21, 2010 at 7:54 am

i need a source to learn about jqurey from A_Z

Oct 1, 2010 at 9:38 am

does this work in ie 6 ? my application has to use something similar. I was wondering whether there is a way around for this to show in ie 6.

Great work indeed.


Oct 7, 2010 at 9:49 pm

I have recently started using the blogengine.net and I having some problems here? in your blog you stated that we need to enable write permissions on the App_Data folder…unfortunately I don’t understand how to enable it.

Oct 13, 2010 at 9:35 am

If you depend on classes “item1” upto “item4”, you might as well use :nth-child(1) upto :nth-child(4), which will do exactly the same thing without any javascript. Won’t work in IE6 though (but who cares).

El garch
Oct 21, 2010 at 4:57 am

Thank youfor this nice post, keep posting ^^

Nov 8, 2010 at 2:40 pm

Absolutely JUST what I needed for a re-write I am doing atm. Thank you SO much!

Søren Larsen Pedersen
Nov 30, 2010 at 7:36 pm

There is missing a “+” in your javascript in this line:

$(this).addClass(“item” i);

Elsewise it’s great! :)

Henry Peise
Dec 23, 2010 at 11:26 pm

Apple’s launch of the iPhone 4 white has seen the greatest excitement for a new phone ever, with HD video recording, a super high-res screen and ridiculously slim dimensions, it’s not hard to see why its so popular in the world.

Juno Mindoes
Dec 24, 2010 at 10:08 pm

As iphone 4 white 3GS has something of non-update to the iPhone range, but there are finally decent alternatives in the smartphone market, with the HTC Desire and Samsung Galaxy S leading the Android fight right to Apple’s door.

Dec 25, 2010 at 12:17 am

Very Nice.. I love it.

jquery library
Dec 30, 2010 at 12:38 am

i need to know the complete list of all possible jquery operations.

jquery library
Dec 30, 2010 at 12:44 am

IE, the only browser that wastes designers time.
I hope microsoft changes the way it behaves now in the near future.If not no one would use it.

Uçak Bileti
Jan 11, 2011 at 3:09 pm

yanar sözlerim

Uçak Bileti
Jan 12, 2011 at 5:23 am

ağlattın bir günde güldür beni sennnn

Jan 13, 2011 at 4:15 am

This information is really good and I will say will always be helpful if we try it risk free. So if you can back it up. That will really help us all. And this might bring some good repute to you.

tütüne son
Jan 29, 2011 at 3:51 pm

i need to know the complete list of all possible jquery operations.

formula 21
Feb 1, 2011 at 4:37 am

I like this

altın çilek
Feb 2, 2011 at 5:53 am

I always follow your site thank you

hcg damla
Feb 2, 2011 at 1:49 pm

i need to know the complete list of all possible jquery operations.

How To Put On A Condom | How To Get Taller
Mar 17, 2011 at 5:44 pm

Yep, definitely is annonying to manually code something that is sequential. You really are a big help. Thanks.

How To Get Taller | How To Put On A Condom
Mar 17, 2011 at 5:45 pm

I would have been doing a senseless sequential. Thank you for creating this article.

panax clavis
May 16, 2011 at 5:53 am

I always follow your site thank you

Jun 15, 2011 at 11:00 am

Thanks for the info. Bookmarked

Jun 16, 2011 at 1:36 am

thanks to information

Jul 8, 2011 at 3:39 am

Very detailed. Easy to follow.

Cyrstal Sater
Aug 22, 2011 at 10:19 pm

I really enjoy this theme youve got going on on your internet site. What is the name of the theme by the way? I was thinking of using this style for the web site I am going to construct for my class project.

xbox 360
Aug 25, 2011 at 10:17 pm

This tutorial will show you how to use jQuery to add a sequent of CSS classes to create a graphical list.

Sep 6, 2011 at 12:04 pm


Oct 20, 2011 at 1:30 pm

This tutorial is very useful.

spring valley vitamins
Jan 20, 2012 at 4:49 am

definitely, a BIG BIG deals.thx, for article

Feb 16, 2012 at 12:12 am

Awesome.. this is what I’m looking for so far ! thanks for sharing this tutorial :)

Mar 12, 2012 at 4:45 am

great blog

May 2, 2012 at 1:23 pm

This tutorial is very useful.

yates en Ibiza
Jul 28, 2012 at 4:10 am

You are using 3 different images for 1, 2, 3. Why not a single image for background and put the numbers in text?

Ya I know the font you are using for the “Step 1″, “Step 2″, “Step 3″ may not be in the system and it has a little glow effect. For that I’ll use “Cufon” technology.

Sep 25, 2012 at 8:45 am

you forgot a “+” there.


$(“#step li”).each(function (i) {
i = i+1;


Oct 9, 2012 at 5:48 am

Thank you

Exactly what I was looking for. Already looked up the jQuery online help.

Oct 9, 2012 at 6:10 am

Hi Jathin,

thanks for the hint regarding the “+” … now it works!

Post Comment or Questions

Your email address will not be published. Required fields are marked *