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

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

Сортировка на jQuery

В моем случае (см. картинку выше) все квартиры лежали вразброс в одном массиве, а отсортировать их нужно было по 3 параметрам сразу. Но на выходе была одна проблема, которая не понравилась заказчику — некоторые квартиры стояли не по порядку, а в виде 10,7,8,9.

На помощь пришли javascript и jQuery. Итоговый сырой скрипт выглядит следующим образом. Кусок из HTML:

Элементы вы можете дописать сами. А теперь сам скрипт:

Теперь по порядку. В каждой строчке мы берем наши ссылки (элементы), сравниваем 2 элемента между собой. В переменной очень важно избавиться от пробелов (при помощи trim), ищем в них нашу строку с номером (класс .box__number), берем в ней текст и убираем первый символ (№). После этого мы проверяем на количество символов в переменной (при помощи length) — это как раз и позволяет исправить ошибку «что больше 10 или 9».

Наш скрипт нормально работает, хотя он и не идеален. Ваша задача адаптировать его под себя, то есть, выбрать ваш контейнер или контейнеры с данными (в моем случае это строка), элементы (в моем случае это ссылки), и записать в переменные чистые значения без всяких пробелов и символов. Кстати говоря, вы можете сразу это делать в переменной $elements.

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года. Посмотреть некоторые из моих работ, а также узнать чуть больше обо мне, вы можете на forwww.com/dmitriy/.

Какие услуги предоставляю:
- Создание сайтов, шаблонов и компонентов на 1С-Битрикс;
- Разработка функционала с нуля и доработка кода на уже созданных проектах;
- Адаптивная вёрстка макетов и натяжка на Битрикс;
- Парсинг файлов и выгрузка на сайт (форматы - CSV, XML, XLSX, JSON)
- Интеграции со сторонними сервисами по API;
- Многоязычные версии и многое другое.

Если у вас остались вопросы, свяжитесь со мной любым удобным для вас способом или оставьте комментарий внизу.
E-mail: dmitriyribka@gmail.com
Skype: cinemacreaterus

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *