моя реализация сортировки
<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>