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

时间：2018-04-27 12:53:42

标签： javascript jquery html sorting

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

这是我按字母顺序排序的结果，但是每次点击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;

3 个答案:

答案 0 :(得分：1)

尝试使用：

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

答案 1 :(得分：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>

答案 2 :(得分：1)

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

相关问题
最新问题