Когда говоришь о сортировке, в первую очередь на ум приходят именно массивы. Но, работать с массивами чаще всего нужно не на клиентской стороне, а на стороне сервера. Как же быть в таких ситуациях?
Сортировка на jQuery
В моем случае (см. картинку выше) все квартиры лежали вразброс в одном массиве, а отсортировать их нужно было по 3 параметрам сразу. Но на выходе была одна проблема, которая не понравилась заказчику – некоторые квартиры стояли не по порядку, а в виде 10,7,8,9.
На помощь пришли javascript и jQuery. Итоговый сырой скрипт выглядит следующим образом. Кусок из HTML:
<div class="floors__box"> <a class="panel box" href="#"> <i class="ico ico-percent box__percent"></i> <span class="box__number">№186</span> <span class="box__string"> 3 комнаты<br>3 517 940 руб.<br>84.34 м<sup class="box__sup">2</sup> </span> </a> <a class="panel box" href="#">...другие элементы</a> </div>
Элементы вы можете дописать сами. А теперь сам скрипт:
<script> $(function(){ $('.floors__box').each(function(){ var $elements = $(this).children('a'); // элементы var $target = $(this); $elements.sort(function (a, b) { var an = $.trim($(a).children('.box__number').text()).substring(1), bn = $.trim($(b).children('.box__number').text()).substring(1); if (an.length == 1) an = '00' + an; if (an.length == 2) an = '0' + an; if (bn.length == 1) bn = '00' + bn; if (bn.length == 2) bn = '0' + bn; if (an && bn) { return an.localeCompare(bn); } return 0; }); $elements.detach().appendTo($target); }); }); </script>
Теперь по порядку. В каждой строчке мы берем наши ссылки (элементы), сравниваем 2 элемента между собой. В переменной очень важно избавиться от пробелов (при помощи trim), ищем в них нашу строку с номером (класс .box__number), берем в ней текст и убираем первый символ (№). После этого мы проверяем на количество символов в переменной (при помощи length) – это как раз и позволяет исправить ошибку “что больше 10 или 9”.
Наш скрипт нормально работает, хотя он и не идеален. Ваша задача адаптировать его под себя, то есть, выбрать ваш контейнер или контейнеры с данными (в моем случае это строка), элементы (в моем случае это ссылки), и записать в переменные чистые значения без всяких пробелов и символов. Кстати говоря, вы можете сразу это делать в переменной $elements.