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