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按钮不会将整个列表与新添加的项目一起排序，它将按字母顺序对初始列表进行排序，然后按字母顺序添加新项目，使整个列表由两个字母列表组成。我想知道我怎样才能这样做，这样排序按钮会在我添加具有键盘功能的新项目后按字母顺序对整个列表进行排序。

Answer 1

您无法对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 2

使用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 3

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

Answer 4

虽然马弗尔的解决方案有效，但分离（）并不是你的工作不起作用的原因。

我认为你的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>

该空格会导致您的初始硬编码元素始终按字母顺序排列，然后才能使用#c;＆＃39;。修复你的初始html或剥离空白将是解决方案。

查看HTML后，您的问题是大小写之前优先级大小写。您可能正在使用小写

测试其他输入

jQuery列表在追加后不会排序

4 个答案: