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

Question

[Сергей]

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

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

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

Answer 1

[Борис Черепанов]

Вот написал пример сортировки по цене.
Только 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']);
});

Comments

[Сергей]

Ваш код работает, но, к сожалению, выстраивает только в убывающем порядке.
Сортирую по нажатию кнопки document.querySelector('.sorting__price').onclick = function() {};
На второе нажатие никак не реагирует. Не подскажите как дополнить код?

[Борис Черепанов]

Если я вас правильно понял то вот:

var btn = document.getElementById('buton');
var toggle = false;

btn.addEventListener('click', function(){
  var items = document.querySelectorAll('.appartments-item');
  var parent = document.getElementById('parent');
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 compareNumeric1(a, b) {
  a = parseInt(a);
  b = parseInt(b);
  if (a < b) return 1;
  if (a > b) return -1;
}
  function compareNumeric2(a, b) {
  a = parseInt(a);
  b = parseInt(b);
  if (a > b) return 1;
  if (a < b) return -1;
}
if(toggle === false){
  keys.sort(compareNumeric1);
  toggle = !toggle;
} else {
  keys.sort(compareNumeric2);
  toggle = !toggle;
}

keys.map(function(key, indx){
  parent.insertAdjacentElement('beforeend', SortElements[key]['element']);
  SortElements[key]['index'] = indx;
});
  return toggle;
}, toggle);

HTML Был вот такой

<div id="buton">нажми</div>
<div id="parent">
  <article class="appartments-item" tabindex="0">
      <h2 class="appartments-item__title">Студия №44</h2>
      <div class="appartments-item__price">5 000 000 руб</div>
      <footer class="appartments-item__footer  appartments-footer">
        <span class="appartments-footer__text--free">Свободно</span>
        <span class="appartments-footer__text--reserved">Забронировано</span>
      </footer>
      <div class="appartments-item__star"></div>
    </article>

    <article class="appartments-item" tabindex="0">
      <h2 class="appartments-item__title">Однокомнатная №666</h2>
      <div class="appartments-item__price">16 000 000 руб</div>
      <footer class="appartments-item__footer  appartments-footer">
        <span class="appartments-footer__text--free">Свободно</span>
        <span class="appartments-footer__text--reserved">Забронировано</span>
      </footer>
      <div class="appartments-item__star"></div>
    </article>
   <article class="appartments-item" tabindex="0">
      <h2 class="appartments-item__title">Однокомнатная №667</h2>
      <div class="appartments-item__price">16 000 200 руб</div>
      <footer class="appartments-item__footer  appartments-footer">
        <span class="appartments-footer__text--free">Свободно</span>
        <span class="appartments-footer__text--reserved">Забронировано</span>
      </footer>
      <div class="appartments-item__star"></div>
    </article>
</div>

[Сергей]

Борис Черепанов, Большое спасибо!

[Сергей]

Борис Черепанов, Здравствуйте еще раз!
Мучаю ваш код и никак не переделаю так, чтобы он еще по количеству комнат (сортировка квартир) выставлял, кликая по второй кнопке.
Вот в этом диве указывается количество комнат
<div class="appartments-item__room">1</div>

А вот то, на что я пробовал изменить ваш код. Но не работает.

let btn = document.querySelector('.sorting__room');
let toggle = false;

btn.addEventListener('click', function(){
  let items = document.querySelectorAll('.appartments-item');
  let parent = document.querySelector('.appartments');
let SortElements = new Object();
items.forEach(function(item, indx){
  let itemValue = item.querySelector('.appartments-item__room');
  SortElements[itemValue] = {'element': item, 'index': indx} ;
});
let keys = Object.keys(SortElements);
function compareNumeric1(a, b) {
  if (a < b) return 1;
  if (a > b) return -1;
}
  function compareNumeric2(a, b) {
  if (a > b) return 1;
  if (a < b) return -1;
}
if(toggle === false){
  keys.sort(compareNumeric1);
  toggle = !toggle;
} else {
  keys.sort(compareNumeric2);
  toggle = !toggle;
}

keys.map(function(key, indx){
  parent.insertAdjacentElement('beforeend', SortElements[key]['element']);
  SortElements[key]['index'] = indx;
});
  return toggle;
}, toggle);

Answer 2

[Stalker_RED]

getElementsByClassName возвращает HTMLCollection, у которого нет метода sort

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

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

Я бы рекомендовал взять для обучения задачки попроще.

Comments

[Николай Чуприк]

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

Это примерно как если вы придёте в магазин, запишите на листочки бумаги цены на товары, придёте домой и отсортируете свои листочки по цене. Товары на полке в магазине от этого никак не передвинутся.

[Stalker_RED]

Николай Чуприк, конечно, их еще в DOM'е придется переставлять.

[Сергей]

Николай Чуприк, Stalker_RED, В этом то и вопрос, как потом отразить эту сортировку на странице, чтобы '.appartments-item' выстроились по новому

[Stalker_RED]

Сергей,
1. Выбрать все price
2. Сконвертировать в массив
3. Для каждого вытащить цену в виде числа, записать его каким-нибудь свойством
4. По этому свойству отсортировать
5. Для каждого найти родительский article
6. Найти родителя общего для всех
7. В этого родителя appendChild отсортированные артиклы

Что непонятно - не стесняйтесь спрашивать

[Сергей]

Stalker_RED, спасибо за принцип работы! Воспользовался готовыми решениями. Будем разбираться как все это работает.

Answer 3

[Павло Пономаренко]

На самом деле надо начать с того, что вы написали вообще нерабочий код. Вот тут:

prices.sort(a, b) {
  ..........
};

Рабочий выглядел бы так:

prices.sort(function (a, b) {
  ..........
});

Comments

[Сергей]

Да, точно. Спасибо!