Как сделать сортировку 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]

Как получить массивоподобные или итерируемые данные в отсортированном виде - функция сортировки получает данные и функцию, принимающую элемент данных и возвращающую его вес (может быть числом или строкой); собирается массив пар, состоящих из элементов данных и их весов; полученный массив сортируется, функция сравнения проверяет, как веса элементов соотносятся между собой; из отсортированного массива извлекаются элементы исходных данных:

const sorted = (data, key) => Array
  .from(data, n => [ key(n), n ])
  .sort(([a], [b]) => a < b ? -1 : +(a > b))
  .map(n => n[1]);

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

const sortChildren = (el, key) =>
  el.append(...sorted(el.children, key));

Направление сортировки будем указывать с помощью data-атрибута:

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

Кнопкам назначаем общий обработчик клика, где сортируем содержимое .catalog-items (вес элемента - число внутри, умноженное на направление сортировки), кликнутой кнопке класс добавляем, у остальных убираем:

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

Comments

[Dzambulat]

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

[0xD34F]

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

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

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

[Dzambulat]

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