4/11/2012

Auto add number by jQuery

code_for_fun

use jQuery to add auto number

   1:  $(document).ready(function() {
   2:      $(".oz-news").children().each(function(i) {
   3:          $(".oz-news li:first").css("border-top", "none");
   4:          //use 'append' or 'prepend'
   5:          $(this).prepend('<span class="number">' + (i + 1) + '.</span>');        
   6:      });
   7:  });

Html code

   1:   <ul class="oz-news">
   2:      <li>                    
   3:          <a href="#">Disable textarea resize with CSS</a>
   4:      </li>
   5:      <li>                    
   6:          <a href="#">Convert the first letter to uppercase (C#)</a>
   7:      </li>
   8:      <li>                    
   9:          <a href="#">Make an iFrame reload using javascript</a>
  10:      </li>                 
  11:  </ul>

 

Different between ‘append’ and ‘prepend’

PREPEND

<li>
    <span class="number">4.</span>                   
    <a href="#">Make an iFrame reload using javascript</a>
</li>

APPEND

<li>                    
    <a href="#">Make an iFrame reload using javascript</a>
    <span class="number">4.</span>  
</li>

0 comments:

Post a Comment

 
  • Followers