jQuery - Обновление сортируемого списка после сортировки

Question

Предположим, у меня есть элемент списка, и в каждом элементе списка есть тег span, похожий на этот <span class="pos">1st</span> То есть от 1 до 5. Таким образом, это будет 1, 2, 3, 4 и 5.

Это сортируемый список, поэтому после сортировки. Я хотел, чтобы он правильно обновлял каждый тег span с номером и суффиксом. Однако в jsFiddle ниже вы увидите, что это не так.

jsFiddle: http://jsfiddle.net/weka/4GN37/

Answer 1

Вот одно решение:

update: function (event, ui) { 
    $(".list span.pos").html(function(i) { 
     var suf = ["st", "nd", "rd"]; 
     return (i + 1) + (suf[i] || "th"); 
    }); 
} 

DEMO:http://jsfiddle.net/4GN37/2/

Answer 2

$('.list').children().each(function(i) { 
    $('.pos', this).text(i + 1); 
    this.id = 'item-' + (i + 1); // ids cannot start with a number 
    // but changing ids is often a bad idea... 
}); 

Демо: http://jsfiddle.net/ThiefMaster/hhFYz/1/

Для суффикса вы можете просто написать функцию, которая возвращает правильный суффикс для заданного числа.

Answer 3

Вот fork of your fiddle, что устраняет проблему. Проблема в том, что в вашем цикле вы просто ссылались на детей по их существующему id, который не изменился. Вам нужно было ссылаться на них по их новой детской позиции.

Вот соответствующий код:

var children = $('ul.list').children(); 
while (loopy < 6) { 
    //$("li#" + loopy + ".rank > span.pos").text(loopy); 
    $('span.pos', children[loopy-1]).text(loopy); 
    console.log("Set pos..... " + loopy); 
    $(children[loopy-1]).attr("id", loopy); 
    loopy++; 
} // end loop