Насколько я понял, читая документацию по JS, "массив" DOV-элементов, вытянутых JS'ом, например, по определенным атрибутам называется "коллекцией". Самое интересное для меня то, что console.log()
отображает их в виде массива (квадратные скобки), но typeof()
явно говорит, что это объект. Соответственно, если коллекция - это объект, то методы, доступные обычному массиву, коллекции недоступны.
Теперь ближе к делу. Есть у меня HTML примерно такого содержания:
<a data-sort="3">link</a>
<section data-sort="4">section</section>
<div data-sort="2">block</div>
<a>just a link, without data-sort</a>
<span data-sort="1">line</span>
JavaScript вытягивает все элементы на странице, у которых есть атрибут data-sort
:
collection = document.querySelectorAll("[data-sort]");
Сейчас элементы записаны в том порядке, в котором они есть на странице (3, 4, 2, 1). Но мне нужно, чтобы в коллекции они хранились в порядке, указанном в самом атрибуте data-sort
.
Я решил использовать функцию sort()
. Но эта функция доступна только для массивов. Пытаюсь сделать так:
collection.sort(function(a, b) {
return a - b;
});
Uncaught TypeError: collection.sort is not a function
Это понятно, ведь мы пытаемся сортировать узлы (nodes), а узлы не больше и не меньше друг друга. Надо сортировать по атрибуту (в котором и записан нужный порядок). Давайте получим массив из атрибутов:
dataAttrs = [];
collection.forEach(function(item, i, coll) {
dataAttrs[i] = item.getAttribute("data-sort");
});
Теперь мы имеем массив вида 3, 4, 2, 1. Его уже можно отсортировать:
dataAttrs.sort(function(a, b) {
return a - b;
});
Готово. Итого мое решение заняло довольно много места и в конце-концов мы имеем отсортированный массив атрибутов и несортированную коллекцию элементов.
Вопрос: как улучшить этот код и все-таки отсортировать не массив атрибутов по значениям (по возрастанию), а саму коллекцию, основываясь на ее атрибутах?
typeof []
:)typeof([])
тоже даст object? Ну тогда я вам скажу, что не буду удивлен, ведьtypeof(null)
тоже даст object! Пусть это и баг.