Здесь вы узнаете, как сделать сортировку HTML списка при помощи JavaScript.
Нажмите на кнопку, чтобы отсортировать список по алфавиту:
- Oslo
- Stockholm
- Helsinki
- Berlin
- Rome
- Madrid
Создаем функцию сортировки
Пример
<button onclick="sortList()">Сортировать</button>
<ul id="id01">
<li>Oslo</li>
<li>Stockholm</li>
<li>Helsinki</li>
<li>Berlin</li>
<li>Rome</li>
<li>Madrid</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).
- Oslo
- Stockholm
- Helsinki
- Berlin
- Rome
- Madrid
Пример
<button onclick="sortList()">Сортировать</button>
<ul id="id01">
<li>Oslo</li>
<li>Stockholm</li>
<li>Helsinki</li>
<li>Berlin</li>
<li>Rome</li>
<li>Madrid</li>
</ul>
<script>
function sortList() {
var list, i, switching, b, shouldSwitch, dir, switchcount = 0;
list = document.getElementById("id01");
switching = true;
// Задаем способ сортировки в восходящем порядке
dir = "asc";
// Создаем цикл, который будет продолжаться пока не будут закончены перестановки
while (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>
Сортировка в числовом порядке
При сортировке в числовом порядке список сортируется в порядке возрастания чисел.
- 4
- 3
- 1
- 7
- 1000
- 5234234
- 2
- 100
Пример
<button onclick="sortList()">Сортировать</button>
<ul id="id01">
<li>4</li>
<li>3</li>
<li>1</li>
<li>7</li>
<li>1000</li>
<li>5234234</li>
<li>2</li>
<li>100</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 (Number(b[i].innerHTML) > Number(b[i + 1].innerHTML)) {
/* если следующий элемент меньше текущего элемента,
пометим, что нужна перестановка и закончим цикл */
shouldSwitch = true;
break;
}
}
if (shouldSwitch) {
// Если перестановка нужна, сделаем перестановку и пометим, что нужно продолжать
b[i].parentNode.insertBefore(b[i + 1], b[i]);
switching = true;
}
}
}
</script>
