jQuery列表won't排序后追加

jQuery list won't sort after append

本文关键字：排序 追加 列表 won jQuery      更新时间：2023-09-26
$(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功能。

使用tinysort插件维护字符顺序:

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

请参考这里

而且排序函数可能需要一个更好的方法来排序提示

$(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;
    }
});

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

这将工作(见这里):

$(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;    
       }
    });
});

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

虽然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后，你的问题是大写优先于小写。您可能正在测试使用小写

的额外输入
相关文章：