Jquery continuous list implementation code

This tutorial will show you how to use jquery to add continuous CSS classes to generate a vivid list. The second example shows how to use jquery's prepend feature to add a Message count to the message list.
Let's take a look at the example.
1A. Add jqueryCode
Download jquery and add the following jquery code between the

Copy code The Code is as follows: <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>

Jquery outputs the following HTML source code:

1b. CSS Encoding
Apply the <li> element of the background image. (Step1.png, step2.png, step3.png, etc ).Copy codeThe Code is as follows: # 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 continuous content
You can also use this technique to add ordered content and jquery's prepend method. This method is used to generate a count message list.

Copy code The Code is as follows: <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>

A <span calss = "commentnumber"> count </span> is added for each <li>.

2b. CSS
Style <li>: Position: Relative: place. commentnumber in the upper right corner of the message bar with position: absolute.Copy codeThe Code is as follows: # commentlist Li {
Position: relative;
}
# Commentlist. commentnumber {
Position: absolute;
Right: 0;
Top: 8px;
}

2b. CSS
Style <li>: Position: Relative: place. commentnumber in the upper right corner of the message bar with position: absolute.Copy codeThe Code is as follows: # commentlist Li {
Position: relative;
}
# Commentlist. commentnumber {
Position: absolute;
Right: 0;
Top: 8px;
}