Question

I have a list powered by jQuery UI’s sortable that allows a user to order line items. I want to have a number that represents the position of that object after it is dropped.

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

Right now I have a number (not using an <ol> because I want to style/position the number… and that wouldn’t solve the problem anyway). Obviously, if I were to move Canonical’s line item to the top, the 3 would stay with it.

Is there way, using jQuery that I could recalculate the numbers every time a line item is dropped in place?

Thanks. 🙂

Answer 1

Shorter:

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