Домой / Для сайта / Фильтрация элементов с помощью jQuery
Фильтрация элементов с помощью jQuery

Фильтрация элементов с помощью jQuery

В примере реализован jQuery фильтр, который можно использовать для сортировки/фильтрации практически любых элементов (включая изображения, списки, фото, и т.д.). Возможности для применения данного фильтра достаточно широкие.

Сортировка элементов создана с помощью простого скрипта, для работы которого необходимо обязательно подключить библиотеку jQuery.

Если у вас есть вопросы, задавайте в комментариях.

Демо

HTML

<h2>Фильтрация элементов с помощью jQuery</h2>

<p>
<button class="f-red">Фильтр красных элементов</button>
<button class="f-blue">Фильтр синих элементов</button>
<button class="f-green">Фильтр зеленых элементов</button>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<button class="f-all">Все элементы</button>
</p>

<div class="red">Первый</div>
<div class="red">Второй</div>
<div class="blue">Третий</div>
<div class="green">Четвертый</div>
<div class="red">Пятый</div>
<div class="blue">Шестой</div>
<div class="blue">Седьмой</div>
<div class="green">Восьмой</div>

CSS

body {
 padding: 10%;
 font-family: sans-serif;
}

button {
 padding: 1em;
 border: 0;
 margin: 0.25em;
 color: #fff;
 cursor: pointer;
}

.f-red {
 background: #ff4136;
}
.f-red:hover {
 background: #e90d00;
}

.f-green {
 background: #2ecc40;
}
.f-green:hover {
 background: #208e2c;
}

.f-blue {
 background: #0074d9;
}
.f-blue:hover {
 background: #004b8c;
}

.f-all {
 background: #333;
}
.f-all:hover {
 background: #0d0d0d;
}

.red, .green, .blue {
 color: #fff;
 padding: 1em;
 margin-bottom: 0.25em;
}

.red {
 background: #ff4136;
}

.green {
 background: #2ecc40;
}

.blue {
 background: #0074d9;
}

JS

<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript">
var fActive = '';

function filterColor(color){
 if(fActive != color){
 $('div').filter('.'+color).slideDown();
 $('div').filter(':not(.'+color+')').slideUp();
 fActive = color;
 }
}

$('.f-red').click(function(){ filterColor('red'); });
$('.f-blue').click(function(){ filterColor('blue'); });
$('.f-green').click(function(){ filterColor('green'); });

$('.f-all').click(function(){
 $('div').slideDown();
 fActive = 'all';
});
</script>

В примере реализован jQuery фильтр, который можно использовать для сортировки/фильтрации практически любых элементов (включая изображения, списки, фото, и т.д.). Возможности для применения данного фильтра достаточно широкие. Сортировка элементов создана с помощью простого скрипта, для работы которого необходимо обязательно подключить библиотеку jQuery. Если у вас есть вопросы, задавайте в комментариях. HTML CSS body { padding: 10%; font-family: sans-serif; } button { padding: 1em;&hellip;

Обзор

Проголосуйте за урок

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.01 ( 10 голосов )
100

18 комментариев

  1. Элементы сворачиваются вместе со всей страницей, остается только body c фоном

  2. Т.е. скрипт сворачивает все дивы которые есть на странице

    • Ну как бы, это разумно. Он у тебя на div и указан, вот и сворачивает все.
      $(‘div’).filter(‘.’+color).slideDown();
      $(‘div’).filter(‘:not(.’+color+’)’).slideUp();

  3. Как сделать, чтобы открывалось сначала не сразу все, а уже только красные.
    если я хочу задать ссылку с другой страницы на сразу отфильтрованный блок.

    спасибо большое!

  4. Амстердам

    Скачать дайте готовый пример!!!

  5. Амстердам

    Так вообще не работает!!! если вставить в обычный файл нормальный!

  6. Амстердам

    И сворачивает реально все дивы. Что за сумасшествие! Что за пример!! Надо понимать, что на странице кроме дивов в элементами фильтра будут и другие!!! Как сделать нормально что бы работал, что бы сворачивал только фильтруемые элементы??!!

  7. Амстердам

    Да почему он скрывает ВСЕ дивы на странице а??! Я всю ночь голову ломать должен теперь над этим??! Как сделать НОРМАЛЬНЫЙ фильтр, который будет скрывать только нужные элементы??!!

  8. Амстердам

    Здравствуйте!

    Вам — огромное спасибо! Вы прекрасный человек!! Откликнулись в беде!

    Но изначально предложенный вариант фильтр здесь — действительно не до конца продуманное решение, Ведь на сайте всегда будут дрeubt div’ы. Тот вариант что вы доработали — то что нужно! Но, можно сделать еще практичнее — сделать поиск фильтруемых элементов не по доп. классу (.sort). а ВНУТРИ родителя с доп. классом. Это было бы самое красивое решение. Здорово было бы увидеть его, и, заменить им представленный пример в статье, как вариантом наиболее качественным!

    Спасибо вам за то, что делитесь наработками!!

  9. Александр

    Спасибо! Очень помог!

  10. Алексей

    Здравствуйте,как можно изменить анимацию?

  11. Как реализовать автоматическое применение одного из фильтров?

Оставить комментарий

Ваш email не будет опубликован.

*