Сортировка текста в списке в алфавитном порядке - PullRequest
Новая
       2

Сортировка текста в списке в алфавитном порядке

0 голосов
/ 27 апреля 2018

Мне нужно отсортировать текст в алфавитном порядке.

Вот мой результат для сортировки по алфавиту, но с каждым щелчком по 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>

Ответы [ 3 ]

0 голосов
/ 27 апреля 2018

Используйте 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>
0 голосов
/ 27 апреля 2018

Проверьте документацию для 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>
0 голосов
/ 27 апреля 2018

Попробуйте использовать:

возврат (keyA keyB)? 1: 0;

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...