Сортировка списка в алфавитном порядке с jQuery

Быстрый ответ

Чтобы отсортировать список, используя jQuery, примените следующий код:

var $items = $('#myList li').sort((a, b) => $(a).text().localeCompare($(b).text()));
$('#myList').append($items);

Данный код выберет все элементы списка (li), расставит их по алфавитному порядку согласно текстовому содержимому и вернёт их обратно в контейнер с идентификатором #myList.

Основа логики сортировки и используемые методы

Необходимые знания: азы алфавитной сортировки

Качественная алфавитная сортировка осуществляется с помощью функции localeCompare(), которая упорядочивает строки, учётом национальных особенностей языка, а также эффективно справляется с диакритическими знаками и акцентами. Посмотрим подробнее:

• $('#myList li'): выборка элементов списка внутри контейнера #myList.
• sort(): метод массива, который реализует упорядочивание элементов с помощью функции сравнения.
• localeCompare(): незаменимый инструмент для алфавитной сортировки в разных языках со своеобразными наборами символов.
• append(): возвращает отсортированные элементы обратно в исходный список.

Подробнее об этом расскажет наш спикер на видео

Усовершенствуем функцию сортировки

Сортировка без учёта регистра

Если вам нужно произвести сортировку, игнорируя регистр, приведите все строки к одному, например, к верхнему:

var $items = $('#myList li').sort((a, b) => {
    return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
});
$('#myList').append($items);

Оптимизация взаимодействия с DOM

Для снижения нагрузки на DOM сначала отключите список, затем выполните сортировку и вновь вставьте его на прежнее место:

var $myList = $('#myList').detach();
var $items = $myList.children('li').sort(function(a, b) {
    return $(a).text().localeCompare($(b).text());
});
$myList.append($items).appendTo('body');

Контроль над порядком сортировки

Если необходимо контролировать порядок сортировки (по возрастанию или убыванию), используйте флаг:

var ascending = true; // Измените на false для сортировки по убыванию
var $items = $('#myList li').sort((a, b) => {
    return ascending ?
            $(a).text().localeCompare($(b).text()) :
            $(b).text().localeCompare($(a).text());
});
$('#myList').append($items);

Учёт кросс-браузерности

Обеспечьте совместимость с различными браузерами, предоставив полный колбэк функции сортировки.

Визуализация

С помощью jQuery переустройте хаотический набор:

🍋 🍇 🍏 🍒 🍐 (До) в аккуратно упорядоченный: 🍇 🍏 🍐 🍒 🍋 (После)

...с применением такого кода:

$('ul#fruits').children('li').sort(function(a, b) {
    return $(a).text().localeCompare($(b).text());
}).appendTo('ul#fruits');

Плагины: ваши дополнительные ассистенты

Плагин TinySort — это мощный инструмент для решения сложных задач сортировки, когда базовых возможностей jQuery недостаточно. Он предлагает дополнительные опции:

$('ul#myList li').tinysort();  // "Включите мой плагин!"

Альтернатива jQuery: чистый JavaScript

Иногда для повышения производительности предпочтительнее использовать чистый JavaScript. Обойдя jQuery, вы можете воспользоваться следующим кодом:

var list = document.querySelector('#myList');
Array.from(list.children)
     .sort((a, b) => a.textContent.localeCompare(b.textContent))
     .forEach(node => list.appendChild(node));  // "Кто сказал, что без обходных путей никак?"

Раскрытие тайн кода

Попробуйте работоспособный пример на CodePen или JSFiddle, чтобы лично убедиться в магии сортировки списков.

Полезные материалы

1. MDN Web Docs: Array.prototype.sort() — Детальное объяснение алгоритма сортировки в JavaScript.
2. Обсуждение на Stack Overflow о алфавитной сортировке в jQuery — Познания сообщества Stack Overflow помогут вам осуществить сортировку списков с использованием jQuery.
3. JavaScript Kit: Сортировка элементов при помощи sort() — Пояснение процесса сортировки массивов с помощью метода array.sort().
4. TutorialsPoint:Пример создания сортируемых списков в jQuery — Инструкция по созданию сортируемых списков с помощью jQuery UI.
5. Перебор объектов jQuery и не jQuery | jQuery Learning Center — Сведения о том, как работать с методом .map() для сортировки или манипулирования DOM-элементами.