Как сделать - Сортировку списка
Узнать, как сортировать список 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;
}
Редактор кода »