javascript - 按字母顺序对列表中的文本范围进行排序

Question

我需要按字母顺序对文本进行排序。

这是我按字母顺序排序的结果，但是每次点击Click to sort排序的结果都会产生不同的结果。

什么地方做得不对？

我需要更改代码中的哪些内容？

谢谢。

$(document).ready(function() {
  $('a').click(function(e) {
    var $sort = this;
    var $list = $('#sort-list');
    var $listLi = $('.sort', $list);
    $listLi.sort(function(a, b) {
      var keyA = $(a).find('.item').text();
      var keyB = $(b).find('.item').text();
      if ($($sort).hasClass('asc')) {
        return (keyA > keyB) ? 1 : 0;
      }
    });
    $.each($listLi, function(index, row) {
      $list.append(row);
    });
    e.preventDefault();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="link-sort-list asc"><i class="icon-asc"></i>Click to sort</a>


<ul id="sort-list" class="list-group">
  <li class="labeled_count list-group-item justify-content-between label_list"> 
    <span class="count_result badge badge-default badge-pill">items: 000</span> 
  </li>
 
  <li class="sort list-group-item justify-content-between label_list">
    <span class="item">Chandrasekar Balasubramaniyam</span>
  </li>
  <li class="sort list-group-item justify-content-between label_list">
    <span class="item">Charles Bendernagel</span>
  </li>
  <li class="sort list-group-item justify-content-between label_list">
    <span class="item">Ayazur Rehman</span>
  </li>
  <li class="sort list-group-item justify-content-between label_list">
    <span class="item">Devkala Magar</span>
  </li>
  <li class="sort list-group-item justify-content-between label_list">
    <span class="item">Dmitri Sazonoff</span>
  </li>
  <li class="sort list-group-item justify-content-between label_list">
    <span class="item">Coco Li</span>
  </li>
  <li class="sort list-group-item justify-content-between label_list">
    <span class="item">Dimpu Buddha</span>
  </li>
  <li class="sort list-group-item justify-content-between label_list">
    <span class="item">Dzianis Shvets</span>
  </li>
  <li class="sort list-group-item justify-content-between label_list">
    <span class="item">Heng Ji</span>
  </li>
  <li class="sort list-group-item justify-content-between label_list">
    <span class="item">Huran Ibrahim</span>
  </li>
  <li class="sort list-group-item justify-content-between label_list">
    <span class="item">Harshil Shah</span>
  </li>
  
  
 
 
  
</ul>

Answer 1

使用localCompare而不是使用 < 进行比较

    return keyA.localeCompare( keyB );

演示

$(document).ready(function() {
  $('a').click(function(e) {
    var $sort = this;
    var $list = $('#sort-list');
    var $listLi = $('.sort', $list);
    $listLi.sort(function(a, b) {
      var keyA = $(a).find('.item').text();
      var keyB = $(b).find('.item').text();
      if ($($sort).hasClass('asc')) {
        return keyA.localeCompare( keyB );
      }
    });
    $.each($listLi, function(index, row) {
      $list.append(row);
    });
    e.preventDefault();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="link-sort-list asc"><i class="icon-asc"></i>Click to sort</a>


<ul id="sort-list" class="list-group">
  <li class="labeled_count list-group-item justify-content-between label_list"> 
    <span class="count_result badge badge-default badge-pill">items: 000</span> 
  </li>
 
  <li class="sort list-group-item justify-content-between label_list">
    <span class="item">Chandrasekar Balasubramaniyam</span>
  </li>
  <li class="sort list-group-item justify-content-between label_list">
    <span class="item">Charles Bendernagel</span>
  </li>
  <li class="sort list-group-item justify-content-between label_list">
    <span class="item">Ayazur Rehman</span>
  </li>
  <li class="sort list-group-item justify-content-between label_list">
    <span class="item">Devkala Magar</span>
  </li>
  <li class="sort list-group-item justify-content-between label_list">
    <span class="item">Dmitri Sazonoff</span>
  </li>
  <li class="sort list-group-item justify-content-between label_list">
    <span class="item">Coco Li</span>
  </li>
  <li class="sort list-group-item justify-content-between label_list">
    <span class="item">Dimpu Buddha</span>
  </li>
  <li class="sort list-group-item justify-content-between label_list">
    <span class="item">Dzianis Shvets</span>
  </li>
  <li class="sort list-group-item justify-content-between label_list">
    <span class="item">Heng Ji</span>
  </li>
  <li class="sort list-group-item justify-content-between label_list">
    <span class="item">Huran Ibrahim</span>
  </li>
  <li class="sort list-group-item justify-content-between label_list">
    <span class="item">Harshil Shah</span>
  </li>
  
  
 
 
  
</ul>