Liste numérique HTML à ordre inversé

Samedi, quand j'ai transcrit l'énumération des 10 points que j'avais trouvé dans l'article, j'aurais dû, pour respecter le classement original, numéroter la liste dans l'ordre inverse (de 10 à 1).

Comme j'utilisais une combinaison de OL/LI (ordered list), le résultat affiché fût sans surprise de 1 à 10. Quelle technique est-ce que j'aurais pu utiliser pour inverser la numérotation ? Prenons un exemple plus court avec une liste comptant 5 items :

<ol id="list">
 <li>A</li>
 <li>B</li>
 <li>C</li>
 <li>D</li>
 <li>E</li>
</ol>

On sait qu'il existe un attribut HTML pour la balise LI qui s'appelle value. Lorsqu'on lui donne une valeur, la numérotation se poursuit au nombre indiqué, en incrémentant de 1 chaque item qui suit.

<ol id="list">
 <li>A</li>
 <li value="10">B</li>
 <li>C</li>
 <li>D</li>
 <li>E</li>
</ol>

Affichera : 1, 10, 11, 12, 13

Encore là, il n'existe aucun moyen d'indiquer à la liste de compter en sens inverse. On est contraint à attribuer une valeur statique à chaque LI pour obtenir le résultat attendu. Sinon, on pourrait utiliser une boucle dynamique par programmation pour attribuer le nombre à chaque LI. Ça se fait facilement avec un langage exécuté côté serveur (comme PHP) mais je vais vous montrer comment le faire par la manipulation du DOM en JavaScript et jQuery.

Au chargement de la page (onLoad / $(document).ready), ce simple bout de code suffit :

var listLi = $("#list").find("li");
var totalLi = listLi.length;

listLi.each(
   function(i){
       $(this).attr('value', (totalLi - i));
   }
);

On récupère chaque LI de la liste qui possède l'ID list. Du tableau résultant, on compte le nombre d'éléments au total : ce sera la valeur maximale à partir de laquelle on débutera la numérotation. Finalement, on boucle sur chaque LI pour remplacer l'attribut "value" par la valeur du compteur qui se décrémente.

Au final, la même liste sera affichée mais elle sera numérotée en ordre décroissant, peu importe le nombre d'éléments qui la compose.