Question

I am trying to sort the list of elements using the javascript/jquery.

But for the first time the sorting is happening which is fine, but if I click again then it should go to the unsorted view.

and the process should go on like this…

Here is the demo link:

Sorting Demo

Answer 1

I think the below code is what you are searching for (sort in ascending order on first click and reverse on next click.):

var sort_ascend= true;
    function sort() {
        var mylist = $('#sorting_list ul');
        var listitems = mylist.children('li').get();
        mylist.empty();
        if(sort_ascend){
            listitems.sort(function (a, b) {
                return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
            })
        }
        else{
            listitems.reverse(function (a, b) {
                return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
            })
        }
        sort_ascend = !sort_ascend;
        $.each(listitems, function (idx, itm) { mylist.append(itm); });
    }