Как можно отсортировать элементы по дата-атрибуту?

Question

[Evtera]

Есть DOM-дерево следующего вида:

<div class=" tab-content" data-tab_content="3"></div>
<div class=" tab-content" data-tab_content="1"></div>
<div class=" tab-content" data-tab_content="2"></div>
<div class=" tab-content" data-tab_content="4"></div>

Как его можно отсортировать по data-атрибуту для последующего импорта в контейнер через innerHTML?

Comments

[Алексей Ярков]

А как вы уже пытались?

[Evtera]

Aleksandr-JS-Developer, для чего же он нужен?

[Evtera]

Алексей Ярков, пытался через sort, но в итоге пошел какой-то огород и я понял, что делаю что-то не так и обязано быть более лаконичное решение

Answer 1

[Денис Инешин]

Ну например: https://jsfiddle.net/6exkp8ng/

Comments

[Evtera]

Думаю, это рабочий вариант. Завтра попробую уложить всё в один цикл

Answer 2

[Стефан]

Отсортировать можете вот так:

const nodes = document.querySelectorAll('.tab-content')
let sortedNodes = Array.from(nodes).sort((el1, el2) => el1.dataset.tab_content - el2.dataset.tab_content)

И у вас будет массив остартированных элементов.
Вставить можете вот так:

const container = document.querySelector('.container')
sortedNodes.forEach((el) => {
    container.insertAdjacentElement('beforeend', el)
})

Comments

[Evtera]

очень интересное решение. Нужно будет завтра попробовать. даже не думал о том, что можно нод узлы через sort прогнать.

[Стефан]

Evtera, узлы такой же объект как и любой другой, так что сортируется без проблем, только если вы получаете узлы через querySelectorAll(), то вам вернется NodeList, и из него надо сделать массив как показанно в коде выше.