Mettre en forme une liste séquentiel avec jQuery

Avez-vous déjà coder manuellement quelque chose de séquentiel ? Vous avez certainement trouvez cela très ennuyant! Alors, voici donc une solution simple pour vous! Nous allons donc voir ici comment mettre en forme une liste séquentiel avec jQuery. Quoi de mieux que de saisir ça liste sans avoir besoin de ce soucier de l'apparence et des classes css de votre liste! Vous serez en mesure de sauvez beaucoup de temps. Le temps c'est de l'argent non ?

Code original

<ol>
   <li>...</li>
   <li>...</li>
   <li>...</li>
</ol>   

jQuery

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

Code généré avec jQuery

<ol>
   <li class="item1">...</li>
   <li class="item2">...</li>
   <li class="item3">...</li>
</ol>   

CSS

#step .item1 {
   background: url(step1.png) no-repeat;
}
#step .item2 {
   background: url(step2.png) no-repeat;
}
#step .item3 {
   background: url(step3.png) no-repeat;
}   

Ajout de contenu séquentiel

Vous pouvez aussi utiliser cette technique afin d'ajouter du contenu séquentiel à votre liste avec jQuery. Voici ici comment ajouter un compteur sur chaque ligne.

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

Le code ci-dessus ajoutera un bloc <span class="commentnumber"> à chaque élément <li> de votre liste.

Code généré avec jQuery

<ol>
   <li>
      <span class="commentnumber">#1</span>
   </li>
   <li>
      <span class="commentnumber">#2</span>
   </li>
   <li>
      <span class="commentnumber">#3</span>
   </li>
</ol>   

CSS

#commentlist li {
   position: relative;
}
 
#commentlist .commentnumber {
   position: absolute;
   right: 0;
   top: 8px;
}