Как отсортировать коллекцию DOM-элементов?

Question

[nomta]

Пытаюсь отсортировать коллекцию DOM-элементов по свойству element.lastChild.innerHTML

HTML: несколько секций, последний дочерний элемент каждой секции - span с числовым значением. Требуется отсортировать секции со значением спана в порядке возрастания. Мой код не работает, хотя значения свойства считываются, правильно выводятся в консоль.

Допустим,
var sections = document.querySelectorAll('section');

Array.prototype.sort.call(sections, function(a, b) {
	a.lastChild.innerHTML - b.lastChild.innerHTML
});

Answer 1

[SilvioMenuel]

Ты забыл return в функции, это во-первых.
Во-вторых, вероятно, внутренняя реализация Array.prototype.sort не подходит для NodeList, которым является sections (это только мое предположение). Если скопировать этот список элементов в массив, например, так:

var arr = Array.prototype.slice.call(sections);
arr.sort(function(a, b) {
        return a.lastElementChild.innerHTML - b.lastElementChild.innerHTML
});

То должно заработать.

Comments

[nomta]

Спасибо! Действительно, все заработало!

Answer 2

[Dark Hole]

Вы забываете, что NodeList - это массивоподбный объект имитирующий поведение массива в состоянии "только чтение". Связано это с тем, что NodeList не статичен, он меняется.
Что вам нужно сделать - не совсем понятно. Отсортировать элементы для работы?

var arr = Array.from(sections).sort(function(a, b) { return a.lastElementChild.innerHTML - b.lastElementChild.innerHTML; });

Отсортировать элементы в контейнере? Это сложнее.