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

function show_only_proper_items() {
     var $items_all = $('.item');
     var select_value = $('#select').val();
     var $items_filtered_by_select_value = $items_all.filter('[data-for-select="'+select_value+'"]');
 
     var filter_text = $('#text').val();
     if (filter_text == '') {
         var $items_filtered_by_text = $items_filtered_by_select_value;
     }
     else {
         var $items_filtered_by_name = $items_filtered_by_select_value.filter('[data-item-name*="'+filter_text+'"]');
         var $items_filtered_by_description = $items_filtered_by_select_value.filter('[data-item-description*="'+filter_text+'"]');
         var $items_filtered_by_text = $items_filtered_by_name.add($items_filtered_by_description);
     }
 
     var $items_to_show = $items_filtered_by_text;
     var $items_to_hide = $items_all.not($items_to_show);
     $items_to_hide.hide();
     $items_to_show.show();
 }

Вот такой простой и понятный код.

Работает быстро, потому что мы работали с DOM’ом только в самом начале и в конце. Плюс мы применяем фильтры к всё более и более маленькой выборке.

Не мелькает, потому что мы прячем только лишние элементы. Но в то же время мы не сначала показываем нужные, потом скрываем ненужные — чтобы это занимало меньше памяти и страница не разрасталась, пусть даже в моменте.

 

Применять этот метод можно например вот так:

jQuery(function($) {
     $('#select').on('change', show_only_proper_items);
     $('#text').on('input', show_only_proper_items);
     show_only_proper_items();
 });

 

Пожалуйста!

Оригинальный адрес публикации: https://wordpress-site.ru/kod/bystraya-i-prostaya-filtratsiya-elementov-na-stranitse-s-pomoschyu-jquery/

Обсуждение

avatar

wpDiscuz