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
    Commented 6 июн. 2016 в 19:42
  • @Grundy не совсем понял где сделать и при чем тут это. Commented 6 июн. 2016 в 19:59
  • @Grundy а, вы, видимо, хотели сказать, что typeof([]) тоже даст object? Ну тогда я вам скажу, что не буду удивлен, ведь typeof(null) тоже даст object! Пусть это и баг. Commented 6 июн. 2016 в 20:04
  • в случае с массивов это не баг, да и с нулом тоже не особо баг
    – Grundy
    Commented 6 июн. 2016 в 20:06
  • @Grundy в случае с null, как раз-таки, официально признанный баг, если верить learn.javascript.ru и подобным. Commented 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(...). Commented 6 июн. 2016 в 20:06
  • Я именно этого чего-то и ожидал. Только я думал, что надо будет использовать прототипы, а тут лямбды какие-то (к сожалению, с ними еще плохо знаком). Commented 6 июн. 2016 в 20:06
  • @smellyshovel обновил ответ насчет call() Commented 6 июн. 2016 в 20:08
  • Вот! Если бы вы еще объяснили суть этого кода [].slice.call(collection);, то цены бы не было ответу. Как можно "нарезать" пустой массив? И что делает call с ним потом? Commented 6 июн. 2016 в 20:09
  • @smellyshovel полее подробно в разделе "одалживание метода" learn.javascript.ru/… Commented 6 июн. 2016 в 20:15

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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