使用jQuery對HTML列表進行升序和降序排序

Question

我有一個“編號”名稱列表。 我想按一下按鈕即可按字母順序對它進行排序，但僅在從下拉列表（選擇）中選擇排序條件后才能進行 。

問題是，如果我對項目進行升序排序然后再降序排序，則將降序排序的項目放置在升序排序的項目之后 。 列表越來越大。

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

我究竟做錯了什么？

謝謝！

Answer 1

您必須清除您的sortedItms 。

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