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

$('.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 2

这是一种解决方案：

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

演示：http: //jsfiddle.net/4GN37/2/

Answer 3

这是您的小提琴的一个分支，可以解决您的问题。问题是，在您的循环中，您只是通过他们现有的 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