Как сделать сортировку HTML объектов в зависимости от чисел внутри элемента?

Question

[Dzambulat]

Нужно сделать сортировку HTML элементов в зависимости от числа записанного внутри элемента. Сортировка должна быть по возрастанию и убыванию. Я не знаю как это сделать можете объяснить.

<div class="catalog">
        <div class="filter">
            <div class="MoreToLess btn">От большего к меньшему</div>
            <div class="LessToMore btn">От меньшего к большему</div>
        </div>
        <div class="catalog-items">
            <div class="item">1009$</div>
            <div class="item">309$</div>
            <div class="item">1709$</div> 
            <div class="item">783$</div>
            <div class="item">58$</div> 
            <div class="item">153$</div> 
            <div class="item">289$</div> 
            <div class="item">13$</div>
        </div>
    </div>

const moreToLessBtn = document.querySelector('.MoreToLess');
const lessToMoreBtn = document.querySelector('.LessToMore');

moreToLessBtn.addEventListener('click', ()=>{
    moreToLessBtn.classList.add('active-btn');
    lessToMoreBtn.classList.remove('active-btn');
})
lessToMoreBtn.addEventListener('click', ()=>{
    moreToLessBtn.classList.remove('active-btn');
    lessToMoreBtn.classList.add('active-btn');
})

Comments

[v3shin]

sort() + parseInt() + innerText + appendChild().
А вообще, при вашей структуре html можете собирать все содержимое элементов, пихать его в массив, сортировать и генерировать новый html на замену старого.

[Dzambulat]

v3shin, Можно по подробнее?

Answer 1

[0xD34F]

<button data-order="-1">От большего к меньшему</button>
<button data-order="+1">От меньшего к большему</button>

const wrapper = document.querySelector('.catalog-items');
const buttons = document.querySelectorAll('[data-order]');

buttons.forEach(n => n.addEventListener('click', onClick));

function onClick({ target: t }) {
  const order = +t.dataset.order;
  sortChildren(wrapper, el => parseInt(el.innerText) * order);
  buttons.forEach(n => n.classList.toggle('active', n === t));
}

function sortChildren(parent, value) {
  parent.append(...Array
    .from(parent.children, n => [ n, value(n) ])
    .sort((a, b) => a[1] - b[1])
    .map(n => n[0])
  );
}

Comments

[Dzambulat]

А как по возрастанию сделать

[0xD34F]

А вы только копипастить собираетесь, или всё-таки попробуете понять, что делает предложенный код?

По возрастанию и показано. Наверное, хотели сказать "по убыванию"? Достаточно возвращать значение с обратным знаком.

Ответ обновил.

[Dzambulat]

0xD34F, Извините меня но я пытаюсь понять всю картину целиком