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

Question

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

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

什么做不好？

我需要在代码中更改什么？

感谢。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试使用：

return（keyA＆lt; keyB）？ -1：（keyA＆gt; keyB）？ 1：0;

Answer 2

使用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>

Answer 3

查看Array.prototype.sort()

的文档

代码示例：

$('a').click(function (e) {
  var $list = $('#sort-list');
  var $listLi = $('#sort-list .sort');
  e.preventDefault();
  
  $listLi.sort(function (a, b) {
    var keyA = $(a).find('.item').text();
    var keyB = $(b).find('.item').text();
    return keyA.localeCompare(keyB);
  });
  $list.append($listLi);
});

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