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;

    }
});

Answer 2

您不能对 HTML 元素进行排序，但需要先分离它们（并在排序后重新附加它们）。

这将起作用（请参阅here）：

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

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

Answer 3

问题是您只对 javascript 列表进行排序。您不对 html 列表进行排序。这是因为$(".list li") 返回<li> 节点的javascript 表示。如果要显示它，则必须重新排列 html 树。我认为最简单的方法是删除列表节点的内容并重新插入<li> 节点。

Answer 4

尽管 muffle 的解决方案有效，但 detach() 并不是你的解决方案无效的原因。

我假设你的 html 看起来像这样

<ul class="list">
    <li> <input type='checkbox'>hi</li>
    <li> <input type='checkbox'>bi</li>
    <li> <input type='checkbox'>zi</li>
    <li> <input type='checkbox'>ai</li>
</ul>

什么时候应该是这样的

<ul class="list">
    <li><input type='checkbox'>hi</li>
    <li><input type='checkbox'>bi</li>
    <li><input type='checkbox'>zi</li>
    <li><input type='checkbox'>ai</li>
</ul>

该空格会导致您的初始硬编码元素始终按字母顺序排列在“a”之前。修复您的初始 html 或去除空格将是解决方案。

查看您的 HTML 后，您的问题是大写优先于小写。您可能正在测试小写的附加输入