Feb 09
jQuery Sequential List
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;
}
Jobs for Designers and Developers Dache: Logo Design Process
Comments
Pages: 11 10 9 8 7 6 5 4 3 2 1 » Show All
There are 101 comments (+Add)
Pages: 11 10 9 8 7 6 5 4 3 2 1 » Show All
Loading ...
101 vincentdresses http://www.hibridal.com
January 6th, 2010 at 1:43 am
喜欢你们的设计与技术，常来看看
100 Motti http://www.horesh-studios.com
December 15th, 2009 at 6:55 pm
very nice ideas
made me look at some stuff a bit differently, thanks for the great info!
99 sebastien http://sebastienhiticas.com
November 12th, 2009 at 6:35 am
usefulll tks !
98 Mike http://www.comastore.com
October 31st, 2009 at 5:09 am
very nice job
97 Richard Pergament
October 7th, 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.
96 Cody
October 5th, 2009 at 10:37 am
@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~~
95 Cyrus
September 21st, 2009 at 9:17 am
Great , jQuery Sequential List
Great article. CSS saved web design
Cyrus
Visit http://www.psdtoxhtmlcoder.com
94 bagsin http://handbagsurf.com
September 10th, 2009 at 8:04 pm
Very neat and clean trick.
93 Adrian http://www.wplove.de
September 6th, 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…
92 KJL http://fashionow.net
September 4th, 2009 at 4:46 am
Your tut is useful and easy to read. Thank you.