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

Question

Evtera @Evtera

JavaScript

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

Есть 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?

Вопрос задан более трёх лет назад
90 просмотров

3 комментария

Подписаться 1 Простой 3 комментария

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

Answer 1 · 2021-03-02 17:51:21

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

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)
})

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

Войдите на сайт