Table des matières avec jQuery

Voici un bout de code pour afficher une liste ordonnée sous la forme d’une table des matières comme celles que l’on trouve dans les livres imprimés où le numéro de la page est situé au bout d’une succession de pointillés à la droite de l’énoncé. Il ne s’agit donc pas d’une vraie table des matière, puisque le numéro de la page n’est autre que le numéro de l’item en question. Mais visuellement, cette technique peut faire son petit effet.

<script>
$(document).ready(function() {
    $("ol").css("list-style", "none");
    $("li").each(function(i) {
        $(this).wrapInner('<span></span>').append('<span>'+(i+1)+'</span>').css("background", "#fff url(i/dot.png) repeat-x 0 0.8em");
    });
});
</script>

PS : J’ai trouvé ce bout de Javascript dans le code source d’un site anglo-saxon dont j’ai oublié le nom. Si vous le reconnaissez, n’hésitez pas à vous manifester.

Edit : pfiou, j’ai enfin remis la souris sur le site en question : http://diveintohtml5.org/