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属性排序，但可以根据需要进行修改。

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

jsFiddle example

1 个答案: