Как отсортировать элементы с помощью jQuery

Когда говоришь о сортировке, в первую очередь на ум приходят именно массивы. Но, работать с массивами чаще всего нужно не на клиентской стороне, а на стороне сервера. Как же быть в таких ситуациях?

Сортировка на 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&nbsp;м<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.

автор: Dmitriy

З 2011 року займаюся веб-розробкою. Зараз я – PHP Full Stack Developer.
Обговорити ваш проект, а також дізнатися більше про мене ви можете на цьому сайті:
dev.forwww.com

Email: dmitriyribka@gmail.com

Залишити відповідь