Естественная сортировка на jQuery

Вы используете блокировщик рекламы

Пожалуйста, отключите блокировщик рекламы

Подробнее

Иногда возникает необходимость отсортировать список на JS и все бы ничего, но иногда попадается случай, где элементы списка содержат текст с числом, да еще и с дробным. Все это является естественной сортировкой и сейчас я разберу пример как работает естественная сортировка на jQuery c дробными числами в строке.

Например, есть такой сайдбар, где элемнты списка записаны не по номеру, а, например, по дате создания (это реальный пример из WordPress, где категории выводятся по дате создания или id). Нам же нужно отсротировать этот список по номеру в квадратных скобках.

Вот html списка:

<aside class="sidebar">
    <ul class="elements-list">
        <li class="cat-item">
        	<a>Elements 1</a>
			<ul class="children">
				<li><a href="#">[A1.1] Brand</a></li>
				<li><a href="#">[A2.2] Secondary-Button</a></li>
				<li><a href="#">[A1.3] Fonts</a></li>
				<li><a href="#">[A1.2] Colors</a></li>
				<li><a href="#">[A2.3] Borderless-Button</a></li>
				<li><a href="#">[A2.1] Primary-Button</a></li>
			</ul>
		</li>
		<li class="cat-item">
			<a>Elements 2</a>
			<ul class="children">
				<li><a href="#">[M13.1] Chain Item 1</a></li>
				<li><a href="#">[M13.3] Chain Item 3</a></li>
				<li><a href="#">[M13.2] Chain Item 2</a></li>
				<li><a href="#">[M14.1] Linklists</a></li>
				<li><a href="#">[M13.4] Chain Item 4</a></li>
				<li><a href="#">[M12.1] Contact Form</a></li>
				<li><a href="#">[M13.5] Chain Item 5</a></li>
			</ul>
		</li>
    </ul>
</aside>

Чтобы сделать естественную сортировку, необходимо написать небольшой js код:

$('.elements-list .children').each(function(){
    var mylist = $(this);
    var listitems = mylist.children('li').get();
    listitems.sort(function(a,b) {
        var compA = $(a).text().toUpperCase();
        var compB = $(b).text().toUpperCase();
        return parseFloat(compA.match(/\d+(\.\d)/)[0],10) - parseFloat(compB.match(/\d+(\.\d)/)[0],10);
    })
    $.each(listitems, function(idx, itm) { mylist.append(itm); });
});

Как видно, мы берем все элементы из дочернего списка .children, приводим текст из каждого li в строку и сравниваем каждый элемент как дробные числа с помощью parseFloat. Собственно, естественная сортировка на jQuery не так уж и сложна. Работающий пример можно посмотреть тут.

Демо

Вы используете блокировщик рекламы

Пожалуйста, отключите блокировщик рекламы

Подробнее

Подписывайтесь на наш Telegram канал, чтобы не пропускать наши статьи 😎