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

});
</script>

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

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

151 Comments

1 6 7 8
  1. xbox 360
    Aug 25, 2011 @ 10:17 pm

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

    Reply

  2. sasadSD
    Sep 6, 2011 @ 12:04 pm

    ASD

    Reply

  3. Fernando
    Oct 20, 2011 @ 1:30 pm

    This tutorial is very useful.
    Thanks

    Reply

  4. spring valley vitamins
    Jan 20, 2012 @ 4:49 am

    definitely, a BIG BIG deals.thx, for article

    Reply

  5. kamil
    Feb 16, 2012 @ 12:12 am

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

    Reply

  6. santa
    Mar 12, 2012 @ 4:45 am

    great blog

    Reply

  7. bitkisel
    May 2, 2012 @ 1:23 pm

    This tutorial is very useful.
    Thanks

    Reply

  8. yates en Ibiza
    Jul 28, 2012 @ 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.

    Reply

  9. jathin
    Sep 25, 2012 @ 8:45 am

    you forgot a “+” there.

    $(document).ready(function(){

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

    });

    Reply

  10. Chris
    Oct 9, 2012 @ 5:48 am

    Thank you

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

    Reply

  11. Chris
    Oct 9, 2012 @ 6:10 am

    Hi Jathin,

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

    Reply

1 6 7 8

Leave a Reply