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

时间:2012-06-14 08:56:29

标签: javascript jquery html

假设我有一个列表项,并且在每个列表项中都有一个span标记,看起来像这样<span class="pos">1st</span>15。所以它是第1,第2,第3,第4和第5。

这是一个可排序的列表,所以在你排序之后。我希望它能够使用数字和后缀正确更新每个span标记。但是,在下面的jsFiddle中,您将看到情况并非如此。

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

3 个答案:

答案 0 :(得分: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/

对于后缀,您只需编写一个函数,该函数返回给定数字的正确后缀。

答案 1 :(得分:2)

这是一个解决方案:

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/

答案 2 :(得分:0)

这是一个解决您问题的fork of your fiddle。问题是,在你的循环中,你只是通过他们现有的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