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 jQuery code
Download jQuery and add the following jQuery code between the Copy codeThe 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 codeThe 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;
}