Renuméroter une liste en utilisant jQuery

Question

J'ai une liste alimentée par sortable de jQuery UI qui permet à un utilisateur de commander des éléments de campagne. Je veux avoir un nombre qui représente la position de cet objet après son abandon.

<ul> 
    <li><span class="number">1</span> Apple</li> 
    <li><span class="number">2</span> Microsoft</li> 
    <li><span class="number">3</span> Canonical</li> 
<ul> 

En ce moment, j'ai un numéro (ne pas utiliser un <ol> parce que je veux le style/position, le nombre ... et cela ne résoudrait pas le problème de toute façon). Évidemment, si je devais déplacer l'élément de campagne de Canonical vers le haut, le 3 resterait avec lui.

Y at-il moyen, en utilisant jQuery que je pourrais recalculer les nombres chaque fois qu'un élément de campagne est déposé en place?

Merci. :)

Answer 1

Shorter:

$('li > span.number').each(function(i) { 
    $(this).text(i+1); 
}); 

Answer 2

Vous pouvez utiliser le index() +1 (ou un moyen équivalent de calculer un index) du <li> dans le parent. Quelque chose comme

$('li > span.number').each(function() { 
    var $this = $(this); 
    $this.text($this.parent('li').prevAll().length + 1); 
}); 

Voici un Working Demo. Ajouter /modifier à l'URL pour voir le code