Изменение нумерации списка с помощью jQuery

Question

У меня есть список, поддерживаемый пользовательским интерфейсом jQuery sortable , который позволяет пользователю заказывать позиции. Я хочу иметь число, представляющее позицию этого объекта после его отбрасывания.

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

Прямо сейчас у меня есть номер (не использую <ol>, потому что я хочу стилизовать / расположить номер ... и это все равно не решит проблему). Очевидно, что если бы я переместил позицию Canonical наверх, 3 осталась бы с ней.

Есть ли способ, используя jQuery, чтобы я мог пересчитывать числа каждый раз, когда позиция вставляется на место?

Спасибо. :)

Answer 1

Короче:

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

Answer 2

Вы можете использовать index() + 1 (или эквивалентный способ вычисления индекса) <li> в родительском элементе. Что-то вроде

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

Вот Рабочая демоверсия . Добавьте / edit к URL, чтобы увидеть код