Показать сообщение отдельно
  #19 (permalink)  
Старый 19.07.2017, 14:34
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

моя реализация сортировки
<div id="search-menu">
  <p>Сортировать по :</p>
  <a class="btn" data-sort="user_name" href="#">Имя<span></span></a>
  <a class="btn" data-sort="user_age" href="#">Возраст</a>
</div>

<!-- result -->
<div id="search-results">

  <!-- user #1 -->
  <div class="user">
    <img src="photo_0.jpg" alt="#" class="user_photo">
    <div class="user_name">Peter</div>
    <div class="user_age">20 Age</div>
    <div class="user_about">Bla_bla_bla...description...</div>
  </div>

  <!-- user #2 -->
  <div class="user">
    <img src="photo_1.jpg" alt="#" class="user_photo">
    <div class="user_name">Alex</div>
    <div class="user_age">30 Age</div>
    <div class="user_about">Bla_bla_bla...description...</div>
  </div>

  <!-- user #3 -->
  <div class="user">
    <img src="photo_2.jpg" alt="#" class="user_photo">
    <div class="user_name">Max</div>
    <div class="user_age">27 Age</div>
    <div class="user_about">Bla_bla_bla...description...</div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
(function($) {
  var $content = $("#search-results");
  var $users = $('.user', $content);
  $('#search-menu').on('click', 'a', function(e) {
    e.preventDefault();
    sortContent($(this));
  });

  function sortContent($el) {
    var type = '.' + $el.data('sort');
    var sort = $el.hasClass('sort-up') ? 1 : -1;
    $users.sort(function(a, b) {
      return sort * $(type, b).text().toLowerCase().localeCompare($(type, a).text().toLowerCase());
    }).appendTo($content);
    sort > 0 ? $el.removeClass('sort-up').addClass('sort-down') : $el.removeClass('sort-down').addClass('sort-up');
  }
}(jQuery));
</script>
Ответить с цитированием