@DaveGarrow

Javascript сортировка товаров по цене?

Подскажите как реализовать сортировку по цене. Выбираю по ClassName '.appartments-item__price'. Получаю массив. Сортировать методом sort. А как потом сослаться на '.appartments-item', чтобы карточки выстроились по новому? Это же тоже надо учитывать при сортировке?

https://codepen.io/anon/pen/PxNEvP

5be50b680cf94709884695.jpeg
document.querySelector('.sorting__price').onclick = function() {
  let prices = document.getElementsByClassName('.appartments-item__price');
  prices.sort(function (a, b) {
    if(a > b)
      return -1;
    if(a < b)
      return 1;
    if(a==b)
      return 0 ;
  });
};
  • Вопрос задан
  • 6102 просмотра
Решения вопроса 1
xakplant
@xakplant
Автор сайта xakplant.ru
Вот написал пример сортировки по цене.
Только parent у меня body, у вас наверное будет какой-то другой

var items = document.querySelectorAll('.appartments-item');
var parent = document.body;
var SortElements = new Object();
items.forEach(function(item, indx){
  var itemValue = parseInt(item.querySelector('.appartments-item__price').textContent.replace('руб', '').replace(/\s+/g, ''));
  SortElements[itemValue] = {'element': item, 'index': indx} ;
});
var keys = Object.keys(SortElements);
function compareNumeric(a, b) {
  a = parseInt(a);
  b = parseInt(b);
  if (a < b) return 1;
  if (a > b) return -1;
}
keys.sort(compareNumeric);
keys.map(function(key, indx){
  parent.insertAdjacentElement('beforeend', SortElements[key]['element']);
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Stalker_RED
@Stalker_RED
getElementsByClassName возвращает HTMLCollection, у которого нет метода sort

Можно превратить в массив при помощи Array.from, например.

А потом у вас сортировка. Что именно вы сравниваете, html-элементы?

Я бы рекомендовал взять для обучения задачки попроще.
Ответ написан
На самом деле надо начать с того, что вы написали вообще нерабочий код. Вот тут:
prices.sort(a, b) {
  ..........
};


Рабочий выглядел бы так:
prices.sort(function (a, b) {
  ..........
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы