jQuery - 排序后更新可排序列表

jQuery - Updating a sortable list after sorted

本文关键字：排序 列表 更新 jQuery      更新时间：2023-09-26

假设我有一个列表项，每个列表项中都有一个span标签，如下所示<span class="pos">1st</span> 从1到5。所以它会是 1st、2nd、3rd、4th 和 5th。

这是一个可排序的列表，所以在你排序之后。我希望它使用数字和后缀正确更新每个span标签。但是，在下面的jsFiddle中，您会发现情况并非如此。

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

这是一个解决方案：

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/

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

对于后缀，您可以简单地编写一个函数，该函数返回给定数字的正确后缀。

这是解决您问题的小提琴的分支。问题是在你的循环中，你只是通过他们现有的id引用了孩子，而这些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
相关文章：