Have you written some repeated code manually? You also think they are so boring. Well, there is a better solution here. 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:<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html xmlns =" http://www.w3.org/1999/xhtml "> <Head> <meta http-equiv =" Content-Type "content =" text/html; charset = GBK "/> <script type =" text/javascript "src =" http://www.bkjia.com/ Uploads/Common/jquery-1.3.2.min.js "> </script> <script type =" text/javascript "> $ (document ). ready (function () {$ ("# step li "). each (function (I) {I = I + 1; $ (this ). addClass ("item" + I) ;}; $ ("# number li "). each (function (I) {I = I + 1; $ (this ). addClass ("item" + I) ;}; $ ("# commentlist li "). each (function (I) {I = I + 1; $ (this ). prepend ('<span class = "commentnumber" >#' + I +' </span> ');});}); </script> <title> jQuery implements continuous list-Liehuo.net </title> <style type = "text/css"> body {width: 500px; margin: 20px auto; color: #999; font: 90%/150% Arial, Helvetica, sans-serif;} * {margin: 0; padding: 0 ;}a {color: #333 ;} /* step style */# step {margin: 10px 0 40px; padding: 0 ;}# step li {padding: 3px 0 6px 110px; margin: 0 0 20px; list-style: none ;}# step h3 {font: bold 200%/100% Arial, Helvetica, sans-serif; margin: 0 0 5px; color: #666 ;}# step. item1 {background: url ( http://www.bkjia.com/ Uploads/allimg/091220/step1.png) no-repeat ;}# step. item2 {background: url ( http://www.bkjia.com/ Uploads/allimg/091220/step2.png) no-repeat ;}# step. item3 {background: url ( http://www.bkjia.com/ Uploads/allimg/091220/step3.png) no-repeat;} # step. item4 {background: url ( http://www.bkjia.com/ Uploads/allimg/091220/step4.png) no-repeat;}/* number style */# number {margin: 10px 0 40px; padding: 0;} # number li {padding: 3px 0 6px 55px; margin: 0 0 20px; list-style: none;} # number h3 {font: bold 170%/110% Arial, Helvetica, sans-serif; margin: 3px 0 5px; color: #666;} # number. item1 {background: url ( http://www.bkjia.com/ Uploads/allimg/091220/number1.png) no-repeat;} # number. item2 {background: url ( http://www.bkjia.com/ Uploads/allimg/091220/number2.png) no-repeat;} # number. item3 {background: url ( http://www.bkjia.com/ Uploads/allimg/091220/number3.png) no-repeat;}/* number style */# commentlist {margin: 10px 0 40px; padding: 0 ;}# commentlist li {padding: 10px 0 20px; list-style: none; border-top: solid 1px # ccc; position: relative ;}# commentlist cite {font: bold 140%/110% Arial, Helvetica, sans-serif; color: #666;} # commentlist. time {color: # ccc; margin: 0 0 10px ;}# commentlist. commentnumber {position: absolute; right: 0; Top: 8px; font: normal 200%/100% Georgia, "Times New Roman", Times, serif; color: # ccc ;} </style>
Tip: the code can be modified before running!
1a. Add jQuery code
Download jQuery and add the following jQuery code between the
Copy to ClipboardReference: [www.bkjia.com] <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 to ClipboardReference: [www.bkjia.com] # 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 to ClipboardReference: [www.bkjia.com] <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.
Http://www.cnblogs.com/island205/()
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
