javascript - jQuery 列表不会在追加后排序

Question

$(document).ready(function() {

    $('#new-to-do-item').keyup(function(e) {
        if (e.which === 13) {
           var text = $(this).val();
           var listItem = "<li><input type='checkbox'>" + text + "</li>"
           $(listItem).appendTo('.list');
        }
     });

    //sort
    $(document).on('click', '#coolthings',function(){
        $(".list li").sort(asc_sort).appendTo('.list');
        //$("#debug").text("Output:");
        // accending sort
       function asc_sort(a, b){
           return ($(b).text()) < ($(a).text()) ? 1 : -1;    
       }
}); 

我有一个最初包含 4 个项目的列表，#coolthings 是一个元素，当我单击时，它将按字母顺序对这些项目进行排序，但是，keyup 函数将新项目附加到列表中，#coolthings 按钮不会将整个列表与新添加的项目一起排序，它将按字母顺序对初始列表进行排序，然后按字母顺序添加新项目，使整个列表由两个按字母顺序排列的列表组成。我想知道如何才能让排序按钮在我添加具有 keyup 功能的新项目后按字母顺序对整个列表进行排序。

Answer 1

使用 Char Order Maintained 使用 tinysort 插件:

http://jsfiddle.net/EJ9y7/3/

引用here

此外，排序功能可能需要来自 sorting hints 的更好方法

$(document).ready(function () {
    $('#new-to-do-item').keyup(function (e) {
        if (e.which === 13) {
            var text = $(this).val();
            var listItem = "<li><input type='checkbox'>" + text + "</li>";
            $(listItem).appendTo('.list');
        }
    });
});

//sort
$(document).on('click', '#coolthings', function () {
    var sorted = $(".list li").sort(asc_sort);
    $(".list").append(sorted);
    function asc_sort(a, b) {
        return ($(b).text().toUpperCase()) < ($(a).text().toUpperCase()) ? 1 : -1;

    }
});