САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ

Инструкции

Главная

Меню

Панель иконок Меню иконок Аккордеон Вкладки Вертикальные вкладки Заголовки вкладок Вкладки полностраничные Вкладки при наведении Верхняя навигация Отзывчивый верхний навигатор Навигационная панель с иконками Меню поиска Панель поиска Фиксированная боковой панели Боковой панели навигации Отзывчивая боковая панель Полноэкранная навигация Меню Off-Canvas Наведите боковые кнопки навигации Боковая панель с иконками Горизонтальное меню прокрутки Вертикальное меню Нижняя навигация Отзывчивый нижний навигатор Нижняя граница навигационных ссылок Ссылки меню выровнены по правому краю Центрированная ссылка меню Ссылки меню равной ширины фиксированное меню Скользите вниз бар при прокрутке Скрыть навигационную панель при прокрутке Уменьшить навигационную панель при прокрутке Липкие навигации Навигации на изображения Выпадающее при наведении Выпадающий список по клику Выпадающий список в верхней навигационной панели Выпадающий список в боковой панели навигации Отзывчивая навигация с выпадающим Суб навигации меню Dropup Мега меню Мобильное меню Занавес меню Свернутый Боковой Бар Свернутая Боковая Панель Пагинация Хлебные крошки Группа кнопок Вертикальная группа кнопок Липкий Социальный Бар Pill навигация Отзывчивый заголовок

Изображения

Слайд шоу Слайд шоу галерея Изображение модуль Лайтбокс Изображение сетка отзывчивая Сетка изображений Галерея вкладок Изображение наложение исчезает Изображение наложение слайд Изображение наложение масштаб Изображение наложение заголовок Изображение наложение иконки Изображение Эффект Изображение черно-белое Изображение текст Изображение текстовый блок Изображение прозрачный текст Изображение на всю страницу Изображение форма Изображение герой Изображение размытие фона Изображение фон при прокрутке Изображение бок о бок Изображение округленное Изображение аватар Изображение отзывчивое Изображения центр Изображение миниатюра Познакомьтесь с командой Изображение липкое Изображение перевернутое Изображение дрожание Портфолио галерея Портфолио с фильтрацией Изображение увеличенное Изображение увеличительное стекло Изображение слайдер сравнения

Кнопки

Кнопка оповещения Кнопка в контуре Кнопка с разделением Кнопка анимированная Кнопка исчезающая Кнопка на изображении Кнопки соц сетей Подробнее свернуть Кнопка загрузки Кнопка скачать Кнопка таблетка Кнопка уведомления Кнопка иконка Кнопка вперед/назад Кнопка больше в навигации Кнопка блок Кнопка текст Кнопка круглая Кнопка прокрутки вверх

Формы

Форма входа Форма регистрации Форма проверки Форма контакта Форма вход соц сетей Форма зарегистрировать Форма с иконками Информационный бюллетень Форма уложенная Форма отзывчивая Форма всплывающая Форма линейная Очистить поле ввода Копирование текста в буфер обмена Анимированный поиск Кнопка поиска Полноэкранный поиск Поле ввода в навигаторе Форма входа в навигаторе Пользовательский флажок/радио Пользовательский выбор Тумблер перключатель Установить флажок Обнаружить Caps Lock Кнопка запуска на Enter Проверка пароля Переключение видимости пароля Форма многоступенчатая Функция автозаполнения

Фильры

Фильтр списка Фильтр таблицы Фильтр элементов Фильтр выпадающего списока Сортировка списка Сортировка таблицы

Таблицы

Таблица полосатая зебра Таблица отзывчивая Таблица сравнения

Еще

Полноэкранное Видео Модуль бокс Линия времени Индикатор прокрутки Индикатор выполнения Панель навыков Ползунок диапазона Подсказки Всплывающий Разборный Календарь HTML Включает Список дел Погрузчики Звездный рейтинг Пользовательский рейтинг Эффект наложения Контактные чипы Карточки Флип карта Карточка профиля Карточка товара Предупреждение Выноска Примечание Ценник Круги Стиль HR Купон Группа списков Отзывчивый текст Текст Выреза Светящийся текст Фиксированный подвал Липкий элемент Равная Высота Очистить исправление Отзывчивые поплавки Снэк-бар/тост Полноэкранное окно Чертеж при прокрутке Плавная прокрутка Градиент прокрутки БГ Липкий заголовок Изменить заголовок при прокрутке Ценовая таблица Параллакс Аспект соотношения Переключение нравится/не нравится Переключение скрыть/показать Переключение текста Переключить класс Добавить класс Удалить класс Активный класс Древовидное представление Удалить свойство Автономный режим обнаружения Найти скрытый элемент Перенаправление веб-страницы Увеличить при наведении Флип-бокс Центр по вертикали Переход при наведении курсора Стрелки формировать Скачать ссылку Полный элемент высоты Окно браузера Пользовательская полоса прокрутки Устройство выглядит Цвет заполнителя Цвет выделения текста Цвет макера Вертикальная линия Анимированная иконка Таймер обратного отсчета Пишущая машинка Скоро будет страница Сообщение чата Всплывающее окно чата Разделенный экран Рекомендации Счетчик секций Котировки слайд-шоу Закрываемые злементы списка Типовое устройство точки прерывания Перетаскиваемый HTML элемент Запросы JS медиа Подсветка синтаксиса JS анимации Получить элементы Iframe

Веб сайт

Сделать сайт Сделать сайт (W3.CSS) Сделать сайт (BS3) Сделать сайт (BS4) Центр сайт Контактная секция Большой заголовок Пример сайта

Сетка

2 Колонки макета 3 Колонки макета 4 Колонки макета Сетка расширяющаяся Сетка вид списка Смешанные колонки макета Колонки карточки Зигзагообразный макет Блог макет

Google

Google график Google шрифты

Конвертеры

Конвертер массы Конвертер температуры Конвертер длины Конвертер скорости

Python

Удалить список дубликатов Реверс строки

Как сделать - Сортировка списка



Узнать, как сортировать список HTML с помощью JavaScript.


Нажмите кнопку, чтобы отсортировать список в алфавитном порядке:

  • Осло
  • Стокгольм
  • Хельсинки
  • Берлин
  • Рим
  • Мадрид

Редактор кода »


Создание функции сортировки

Пример

<ul id="id01">
  <li>Осло</li>
  <li>Стокгольм</li>
  <li>Хельсинки</li>
  <li>Берлин</li>
  <li>Рим</li>
  <li>Мадрид</li>
</ul>

<script>
function sortList() {
  var list, i, switching, b, shouldSwitch;
  list = document.getElementById("id01");
  switching = true;
  /* Сделайте цикл, который будет продолжаться до тех пор, пока
  никакого переключения не было сделано: */
  while (switching) {
    // Начните со слов: переключение не выполняется:
    switching = false;
    b = list.getElementsByTagName("LI");
    // Цикл по всем элементам списка:
    for (i = 0; i < (b.length - 1); i++) {
      // Начните с того, что не должно быть никакого переключения:
      shouldSwitch = false;
      /* Проверьте, должен ли следующий элемент
      переключение с текущего пункт:*/
      if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
        /* Если следующий элемент в алфавитном порядке ниже текущего элемента,
        отметьте как переключатель и разорвать петлю: */
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      /* Если переключатель был отмечен, сделайте переключатель
      и отметьте переключатель как сделать: */
      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
    }
  }
}
</script>
Редактор кода »


Сортировка по возрастанию и убыванию

При первом нажатии кнопки направление сортировки будет возрастать (от A до Z).

Щелкните еще раз, и направление сортировки будет нисходящим (от Z до A):

  • Осло
  • Стокгольм
  • Хельсинки
  • Берлин
  • Рим
  • Мадрид

Пример

<ul id="id01">
  <li>Осло</li>
  <li>Стокгольм</li>
  <li>Хельсинки</li>
  <li>Берлин</li>
  <li>Рим</li>
  <li>Мадрид</li>
</ul>

<script>
function sortListDir() {
  var list, i, switching, b, shouldSwitch, dir, switchcount = 0;
  list = document.getElementById("id01");
  switching = true;
  // Установите направление сортировки по возрастанию:
  dir = "asc"
  // Сделайте цикл, который будет продолжаться до тех пор, пока переключение не будет сделано:
  с (switching) {
    // Начните с того: переключение не выполняется:
    switching = false;
    b = list.getElementsByTagName("LI");
    // Цикл через все элементы списка:
    for (i = 0; i < (b.length - 1); i++) {
      // Начните с того, что не должно быть никакого переключения:
      shouldSwitch = false;
      /* Проверьте, должен ли следующий элемент поменяться местами с текущим элементом,
      на основе направления сортировки (asc или desc): */
      if (dir == "asc") {
        if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
          /* Если следующий элемент в алфавитном порядке ниже текущего элемента,
          отметьте как переключатель и разорвать петлю: */
          shouldSwitch = true;
          break;
        }
      } else if (dir == "desc") {
        if (b[i].innerHTML.toLowerCase() < b[i + 1].innerHTML.toLowerCase()) {
          /* Если следующий элемент в алфавитном порядке выше текущего элемента,
          отметьте как переключатель и разорвать петлю: */
          shouldSwitch= true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /* Если переключатель был отмечен, сделайте переключатель
      и отметьте, что переключатель был сделан: */
      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
      // Каждый раз, когда переключатель сделан, увеличьте количество переключателей на 1:
      switchcount ++;
    } else {
      /* Если переключение не было сделано и направление "asc",
      выберите направление, чтобы "desc" и запустите вновь петля. */
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>
Редактор кода »

Список отсортировать по величине

Пример

if (Number(b[i].innerHTML) > Number(b[i + 1].innerHTML)) {
  shouldSwitch =  true;
  break;
}
Редактор кода »