使用jquery.ui.sortable更新列表

Question

I have a list which is numbered.
When sorting the items I need to update a number which correspond to the position in the list.

Here is my code:

$(".sortable").sortable({
    stop: function(event, ui) {
        var prevPos = ui.item.find('.position').text();
        var newPos  = ui.item.index() + 1
        ui.item.find('.position').text(newPos);
        console.log(prevPos);
    }
});

My problem is how should I update the other items?
For example when I move Robert from the 3dt to the 1st?

you can see the demo at this link: http://jsfiddle.net/UAcC7/106/

Answer 1

How about something like this instead:

$(".sortable").sortable({
    stop: function(event, ui) {
        $('.sortable li').each(function(i) {
            $(this).find('span').text(++i);
        });
    }
});

You will be updating all items every time, even the ones that theoretically don't need it. However, I think it will be faster anyway since you don't need to traverse the DOM and do index calculations etc.

http://jsfiddle.net/UAcC7/107/