Sortieren einer HTML-Liste aufsteigend und absteigend, mit jQuery

Question

Ich habe eine "nummerierte" Liste von Namen. Ich möchte es auf Knopfdruck alphabetisch sortieren, aber nur nach Auswahl eines Sortierkriteriums aus einer Dropdown-Liste (wählen).

Das Problem ist, dass, wenn ich die Elemente aufsteigend und dann absteigend sortieren, die absteigenden sortierten Elemente nach die aufsteigenden sortierten Elemente platziert werden. Die Liste wird größer.

$(document).ready(function(){ 
 
    var sortItems = function() { 
 
    var sortedNames = []; 
 
    var sortedItms = []; 
 
    var rawNames = $('.list').find('li'); 
 
    for (var i = 0; i < rawNames.length; i++) { 
 
     var names = $(rawNames[i]).text(); 
 
     sortedNames.push(names); 
 
    } 
 

 
    $('#choose_order').on('change', function(){ 
 
     var currVal = $(this).find("option:selected").val(); 
 
     console.log(currVal); 
 
     if (currVal != 'default') { 
 
     $('#sortbtn').removeClass("disabled"); 
 
     if (currVal == 'asc') { 
 
      sortedNames.sort(); 
 
     } else { 
 
      sortedNames.sort(); 
 
      sortedNames.reverse(); 
 
     } 
 
     } else { 
 
     $('#sortbtn').addClass("disabled"); 
 
     } 
 
    }); 
 

 
    var setItems = function() { 
 
    sortedItms = []; 
 
     for (var j = 0; j < sortedNames.length; j++) { 
 
     var sortedItm = '<li>' + sortedNames[j] + '</li>'; 
 
     sortedItms.push(sortedItm); 
 
     } 
 
     sortedItms.join(''); 
 
     $('.list').html(sortedItms); 
 
    } 
 

 
    $('#sortbtn').on('click', setItems); 
 
    } 
 
    $(window).on('load', sortItems); 
 

 
});

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="pannel"> 
 
    <select name="choose_order" id="choose_order"> 
 
    <option value="default" selected="selected">Choose sorting order</option> 
 
    <option value="asc">Ascending</option> 
 
    <option value="desc">Descending</option> 
 
    </select> 
 
    <div class="buttons_container"> 
 
    <a class="btn btn-success disabled" id="sortbtn">Sort</a> 
 
    </div> 
 
    <ol class="list"> 
 
    <li>Cosmin</li> 
 
    <li>Alina</li> 
 
    <li>Diana</li> 
 
    <li>Elena</li> 
 
    <li>Bogdan</li> 
 
    </ol> 
 
</div>

Was mache ich falsch?

Vielen Dank!

Answer 1

Sie müssen Ihre sortedItms löschen.

var setItems = function() { 
    sortedItms = []; 
     for (var j = 0; j < sortedNames.length; j++) { 
     var sortedItm = '<li>' + sortedNames[j] + '</li>'; 
     sortedItms.push(sortedItm); 
     } 
     sortedItms.join(''); 
     $('.list').html(sortedItms); 
    }