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

389

06 апреля 2019, 18:10

Подскажите как реализовать сортировку по цене.

Выбираю по ClassName .appartments-item__price'.

Получаю массив. Сортировать методом sort. Тут уже выдает ошибку что unexpected token { на строке prices.sort(a, b).

А как потом сослаться на .appartments-item, чтобы карточки выстроились по новому?

Это же тоже надо учитывать при сортировке?

document.querySelector('.sorting__price').onclick = function() { 
  let prices = document.getElementsByClassName('.appartments-item__price'); 
  prices.sort(a, b) { 
    if (a > b) 
      return -1; 
    if (a < b) 
      return 1; 
    if (a == b) 
      return 0; 
  }; 
};

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

Answer 1

document.querySelector('.sorting__price').addEventListener("click", () => { 
  const elements = document.querySelectorAll('.appartments-item'); 
  const sorted = [...elements].sort((a, b) => { 
    const priceElA = a.querySelector(".appartments-item__price"); 
    const priceElB = b.querySelector(".appartments-item__price"); 
    const getPrice = (el) => parseInt(el.innerHTML.replace(/ /g, "")); 
    return getPrice(priceElA) - getPrice(priceElB); 
  }); 
  const resultEl = document.querySelector(".results-container"); 
  resultEl.innerHTML = null; 
  sorted.forEach(el => resultEl.appendChild(el)); 
});

.results-container { 
  background-color: #ffddcc; 
}

<button class="sorting__price">Sort</button> 
<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">Студия №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> 
 
<div class="results-container"></div>

Если игнорировать семантику HTML с несколькими <footer> обернутыми в <article>, то чисто JS должен быть примерно таким:

Event listeners лучше всего добавлять с помощью addEventListener, так как при этом Вы не удаляете остальные listeners, как в случае el.onclick = func
Если взялись использовать querySelector, то используйте его везде и не смешивайте с getElement методами без лишней необходимости. Разницы (почти) никакой, вопрос в читабельности.
Когда Вы получаете елементы после выборки, они не являются массивом, а являются HTMLCollection, следовательно не имеют методов массивов, таких как: forEach, map, sort, etc. Чтобы добавить их, достаточно использовать деструктуризацию [...elements].
Как правильно заметил @dev_null - sort принимает один аргумент, функцию, определяющую порядок сортировки., поэтому читайте документацию.

Answer 2

sort принимает один аргумент, функцию, определяющую порядок сортировки. Пруфы тут.

function callback(evt) { 
 
  var list = document.getElementById('wrapper'); 
 
  var items = list.childNodes; 
  var itemsArr = []; 
  for (var i in items) { 
    if (items[i].nodeType == 1) { 
      itemsArr.push(items[i]); 
    } 
  } 
 
  itemsArr.sort(function(a, b) { 
    return parseFloat(a.getAttribute('price')) == parseFloat(b.getAttribute('price')) ? 
      0 : 
      (parseFloat(a.getAttribute('price')) > parseFloat(b.getAttribute('price')) ? 1 : -1); 
  }); 
 
  for (i = 0; i < itemsArr.length; ++i) { 
    list.appendChild(itemsArr[i]); 
  } 
} 
 
document.getElementById('sort').addEventListener('click', callback);

<div id="wrapper"> 
  <article class="appartments-item" tabindex="0" price="5000000"> 
    <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" price="16000000"> 
    <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" price="5000"> 
    <h2 class="appartments-item__title">Студия №41</h2> 
    <div class="appartments-item__price">5 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> 
</div> 
 
<button id="sort">Sort</button>

Создание интернет-магазина одежды в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как получить значение data в теге select option?

При помощи jquery необходимо взять значение data из выбранного optionПытался сделать при помощи selected, но он берет самый первый option на котором саморучно...

227

jQuery

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

Как получить значение data в теге select option?

Как восспользоваться библеотекой JQuery?

Перемещение объекта в юнити по двум направляющим

Почему объект равен null