Домой / Для сайта / Фильтрация элементов с помощью 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.31 ( 8 голосов )
100

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

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

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

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

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

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

  4. Амстердам

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

  5. Амстердам

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

  6. Амстердам

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

  7. Амстердам

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

  8. Амстердам

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

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

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

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

  9. Александр

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

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

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

*