jQuery技术

jQuery Sequential List

字号+ 作者:H5之家 来源:H5之家 2016-02-20 15:00 我要评论( )

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 lis

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.

View Demo Sequential List

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:

code explain

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

step list

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.

code explain

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

commentlist counter

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.

View Demo Sequential List

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:

code explain

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

step list

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.

code explain

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

commentlist counter

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 7个有用的jQuery小技巧

    7个有用的jQuery小技巧

    2016-02-26 13:02

  • jQuery制作select双向选择列表

    jQuery制作select双向选择列表

    2016-02-26 11:00

  • 全面详细的jQuery常见开发技巧手册

    全面详细的jQuery常见开发技巧手册

    2016-02-26 10:02

  • 强大的jQuery移动插件Top 10

    强大的jQuery移动插件Top 10

    2016-02-25 09:05

网友点评