Практика: фильтрация и сортировка элементов на странице с помощью jQuery

Оглавление

Цель: создать список элементов (например, товары или карточки), реализовать фильтрацию по категориям и сортировку по цене или названию с плавным отображением результатов.

1. Вёрстка элементов и фильтров

<div id="filters">
  <button class="filter-btn" data-category="all">Все</button>
  <button class="filter-btn" data-category="fruits">Фрукты</button>
  <button class="filter-btn" data-category="vegetables">Овощи</button>
</div>

<div id="sort">
  <button class="sort-btn" data-sort="name">Сортировать по названию</button>
  <button class="sort-btn" data-sort="price">Сортировать по цене</button>
</div>

<div id="items">
  <div class="item" data-category="fruits" data-name="Яблоко" data-price="100">
    <h4>Яблоко</h4><p>Цена: 100 ₽</p>
  </div>
  <div class="item" data-category="vegetables" data-name="Морковь" data-price="50">
    <h4>Морковь</h4><p>Цена: 50 ₽</p>
  </div>
  <div class="item" data-category="fruits" data-name="Банан" data-price="120">
    <h4>Банан</h4><p>Цена: 120 ₽</p>
  </div>
  <!-- Добавьте больше элементов -->
</div>

<div id="no-results" style="display:none;">Нет результатов</div>

2. CSS для плавного скрытия/показа

.item {
  transition: all 0.3s ease;
  margin-bottom: 10px;
}
.hidden {
  opacity: 0;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
}

3. jQuery: фильтрация по категориям

$(function() {
  $('.filter-btn').on('click', function() {
    let category = $(this).data('category');

    if (category === 'all') {
      $('.item').removeClass('hidden');
    } else {
      $('.item').each(function() {
        let itemCategory = $(this).data('category');
        if (itemCategory === category) {
          $(this).removeClass('hidden');
        } else {
          $(this).addClass('hidden');
        }
      });
    }

    checkNoResults();
  });

  function checkNoResults() {
    if ($('#items .item:not(.hidden)').length === 0) {
      $('#no-results').show();
    } else {
      $('#no-results').hide();
    }
  }
});

4. jQuery: сортировка элементов

$(function() {
  $('.sort-btn').on('click', function() {
    let sortKey = $(this).data('sort');
    let items = $('#items .item').toArray();

    items.sort(function(a, b) {
      let aValue = $(a).data(sortKey);
      let bValue = $(b).data(sortKey);

      if (sortKey === 'price') {
        return aValue - bValue;
      } else {
        return aValue.localeCompare(bValue);
      }
    });

    // Вставляем элементы в отсортированном порядке
    $('#items').empty().append(items);
  });
});

5. Итог

Пользователь может фильтровать элементы по категориям
Можно сортировать элементы по названию или цене
Результаты отображаются плавно, скрываются без резких скачков
Если по фильтру нет результатов, показывается сообщение

6. Задание для закрепления

Добавь мультивыбор категорий (несколько фильтров одновременно)
Реализуй переключение между сортировкой по возрастанию и убыванию
Добавь счётчик отображаемых элементов рядом с фильтрами

Jquery

+ Читать