0

Насколько я понял, читая документацию по 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;
});

Готово. Итого мое решение заняло довольно много места и в конце-концов мы имеем отсортированный массив атрибутов и несортированную коллекцию элементов.

Вопрос: как улучшить этот код и все-таки отсортировать не массив атрибутов по значениям (по возрастанию), а саму коллекцию, основываясь на ее атрибутах?

5
  • 1
    попробуй сделать typeof [] :)
    – Grundy
    6 июн 2016 в 19:42
  • @Grundy не совсем понял где сделать и при чем тут это. 6 июн 2016 в 19:59
  • @Grundy а, вы, видимо, хотели сказать, что typeof([]) тоже даст object? Ну тогда я вам скажу, что не буду удивлен, ведь typeof(null) тоже даст object! Пусть это и баг. 6 июн 2016 в 20:04
  • в случае с массивов это не баг, да и с нулом тоже не особо баг
    – Grundy
    6 июн 2016 в 20:06
  • @Grundy в случае с null, как раз-таки, официально признанный баг, если верить learn.javascript.ru и подобным. 6 июн 2016 в 20:07

1 ответ 1

1

Коллекция же не имеет метода сортировки, поэтому тупо копирую элементы в новый массив и сортирую в примере ниже:

collection = document.querySelectorAll("[data-sort]");
var newColl = []

for (var i = collection.length - 1; i >= 0; i--) {
  newColl.push(collection[i]);
}

newColl.sort(function(a, b) {
  return a.getAttribute("data-sort") - b.getAttribute("data-sort");
});
console.log(newColl);
<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>

Грунди обычно ваяет что-то наподобие этого, заимствует методы и прочую пургу))

collection = document.querySelectorAll("[data-sort]");

var arr = [].slice.call(collection);
arr.sort(function(a, b) {
  return a.getAttribute("data-sort") - b.getAttribute("data-sort");
});
console.log(arr);
<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>

6
  • Ну это, по идее, то же самое, что предлагал я (почти, вы копируете в новый массив сами элементы (это то, до чего я не догадался), а я копировал значения атрибутов). Вот очень интересно решение с [].sort.call(...). 6 июн 2016 в 20:06
  • Я именно этого чего-то и ожидал. Только я думал, что надо будет использовать прототипы, а тут лямбды какие-то (к сожалению, с ними еще плохо знаком). 6 июн 2016 в 20:06
  • @smellyshovel обновил ответ насчет call() 6 июн 2016 в 20:08
  • Вот! Если бы вы еще объяснили суть этого кода [].slice.call(collection);, то цены бы не было ответу. Как можно "нарезать" пустой массив? И что делает call с ним потом? 6 июн 2016 в 20:09
  • @smellyshovel полее подробно в разделе "одалживание метода" learn.javascript.ru/… 6 июн 2016 в 20:15

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.