0

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

Выбираю по 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>

7
  • Даже и приблизительно не должно работать
    – dev_null
    Commented 8 нояб. 2018 в 23:28
  • Тег <footer> на странице может быть только в единственном экземпляре... Так же как теги <header>, <main>
    – Air
    Commented 9 нояб. 2018 в 5:53
  • @Air это не так.... Footer также можно вкладывать в section и в atricle Commented 9 нояб. 2018 в 7:06
  • Ну-Ну.... можно так можно...
    – Air
    Commented 9 нояб. 2018 в 13:52
  • @Air почему нельзя? Если в документации сказано, что можно, то почему нет? Если вы думайте, что теги footer и header сделали чтобы верх и них страницы обрамлять, то вы ошибаетесь. Commented 9 нояб. 2018 в 14:38

2 ответа 2

0

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 должен быть примерно таким:

  1. Event listeners лучше всего добавлять с помощью addEventListener, так как при этом Вы не удаляете остальные listeners, как в случае el.onclick = func
  2. Если взялись использовать querySelector, то используйте его везде и не смешивайте с getElement методами без лишней необходимости. Разницы (почти) никакой, вопрос в читабельности.
  3. Когда Вы получаете елементы после выборки, они не являются массивом, а являются HTMLCollection, следовательно не имеют методов массивов, таких как: forEach, map, sort, etc. Чтобы добавить их, достаточно использовать деструктуризацию [...elements].
  4. Как правильно заметил @dev_null - sort принимает один аргумент, функцию, определяющую порядок сортировки., поэтому читайте документацию.
2
  • Ваш код работает, но, к сожалению, выстраивает только в возрастающем порядке. На второе нажатие никак не реагирует. Не подскажите как дополнить код? И благодарю за комментарии. Commented 9 нояб. 2018 в 18:06
  • Убрал только resultEl.innerHTML = null; Иначе кнопка сортировки пропадает. Commented 9 нояб. 2018 в 18:14
0

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>

8
  • Что за фильтрация по nodeType? Commented 9 нояб. 2018 в 6:18
  • @AlexandrTovmach Дабы игнорировать текстовые ноды
    – dev_null
    Commented 9 нояб. 2018 в 12:40
  • Извращение еще то Commented 9 нояб. 2018 в 13:28
  • @AlexandrTovmach Такое вот работающее извращение
    – dev_null
    Commented 9 нояб. 2018 в 14:19
  • Ваш код рабочий, благодарю! Но возможны решения без добавления атрибута 'price'. Commented 9 нояб. 2018 в 18:18

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.