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

Question

jsFiddle example

我正在尝试使用 ol显示多个动态列表项。在 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);
    });
}    

Updated fiddle

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