CODEWITHSUNDEEP
javascriptjqueryhtmllistsorting
frankcrest
frankcrest

Reputation: 117

jQuery list won't sort after append

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

I have a list that initially consist of 4 items, and #coolthings is a element that when i click, will sort those items in alphabetical order, however, the keyup function appends new items to the list, and the #coolthings button will not sort the WHOLE list along with the newly added items, it will sort the initial list alphabetically, followed by new items added alphabetically, making the entire list consisted of two alphabetical lists. I wonder how can i make it so the sort button will sort the ENTIRE list in alphabetical order after i added the new items with keyup function.

Upvotes: 1

Views: 4732

Answers (4)

Abs
Abs

Reputation: 3962

With Char Order Maintained uses tinysort plugin:

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

Refer here

Also the sorting function may need a better way from 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;

    }
});

Upvotes: 2

Nick Avi
Nick Avi

Reputation: 1239

Although muffle's solution works, detach() is NOT the reason yours did not work.

I assume your html looks something like this

<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>

when it should actually look like this

<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>

that space would cause your initial hardcoded elements to always be alphabetized before 'a'. Fixing your initial html or stripping whitespace would be the solution.

After viewing your HTML, your issue is capitalization is prioritized before lowercase. You're probably testing additional input with lower case

Upvotes: 0

muffel
muffel

Reputation: 7370

You cannot sort HTML elements, but need to detach them first (and re-attach them after they were sorted).

This will work (see 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;    
       }
    });
});

Upvotes: 2

Piotr Karasiński
Piotr Karasiński

Reputation: 409

The problem is you sort just javascript list. You do not sort html list. It's because $(".list li") return javascript representation of <li> nodes. If you want to display it, you must rearrange html tree. The easiest way I think is to erase content of list node and reinsert <li> nodes.

Upvotes: 0

Related Questions