javascript - 在附加列表项后刷新有序列表的顺序

Question

jsFiddle 示例

我正在尝试使用 anol来显示几个动态的列表项。在appending使用 jQuery 的列表项上，我希望浏览器会刷新有序列表，但它似乎没有。

<ol>
    <li value="1">First</li>
    <li value="2">Second</li>
    <li value="4">Forth</li>
</ol>

附加 后<li value="3">Third</li>，结果顺序为：

// First
// Second
// Forth
// Third <-

我是否需要触发重新排序，还是仅在渲染页面/添加列表 DOM 元素时计算订单？

注意：我使用的是 Chrome 28.0.1500.95m

Answer 1

首先，请注意这value不是 的有效属性li，因此您的代码无效。您应该data为您需要的任何非标准属性使用属性，您需要编写一个排序函数。尝试这个：

$('#addThird').one('click', function() {
   $('ol').append('<li data-value="3">Third</li>');
    sortItems();
});

var sortItems = function() {
    var $items = $('ol li');
    $items.sort(function(a, b) {
        var keyA = $(a).data('value');
        var keyB = $(b).data('value');
        return (keyA > keyB) ? 1 : 0;
    });
    $.each($items, function(index, row){
        $('ol').append(row);
    });
}    

更新的小提琴

这按元素的属性排序data-value，但可以根据需要进行修改。