nice, thx for this article

Such a simple solution – Thanks!

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

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

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

nice,wonderfull

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.

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.

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

thanks… Very useful….

Nice Tutorial Nick. Thanks for sharing !!

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

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

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

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

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
Sander

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.

谢谢提供这样好的东东！！

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

This is really great! Thank you!!

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

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

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.

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

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

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

Nice post ! Very good ! Cool ! Tank´s

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

Ok, solved. jQuery.noConflict();

Yet another great quick tip, Thanks so much!

wow that’s great, good tutorial.. thanks

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) {
i++;
$(this).css(“background” , “url(step” + i + “.png) no-repeat;”);
});

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

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

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

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

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

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}”

Thank you my friend …

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.

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

Brilliant idea, love it :)

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.

Why

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.

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

very nice job thank you

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

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…

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

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

usefulll tks !

喜欢你们的设计与技术，常来看看

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 {
counter-reset:step;
}
li:before
{
counter-increment:step;
content:"Step " counter(step);
}

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
$(this).addClass(“item”+i);

Still a great tutorial! Very clear and informative.

Cheers,
Kathryn

unda

very cool well done

Thank you so much ..
You are very cool

i need a source to learn about jqurey from A_Z

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.

Thank youfor this nice post, keep posting ^^

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

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

Elsewise it’s great! :)

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.

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

yanar sözlerim

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.

I like this

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

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

Thanks for the info. Bookmarked

Very detailed. Easy to follow.

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

This tutorial is very useful.
Thanks

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

This tutorial is very useful.
Thanks

you forgot a “+” there.

$(document).ready(function(){

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

});

Hi Jathin,

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