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

Posted on 2018.11.08

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();
}

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();
});

jQuery(function($) {

$('#select').on('change', show_only_proper_items);

$('#text').on('input', show_only_proper_items);

show_only_proper_items();

});

Пожалуйста!

Код jQuery, JavaScript, производительность, фильтрация

Обсуждение

AffiliateLabz

2020.02.16 10:13

Great content! Super high-quality! Keep it up! :)

-24

Ответить Скрыть ответы ∧

Beau Monahan

Сегодня 03:27

Great article! I really appreciate the clear and detailed insights you’ve provided on this topic. It’s always refreshing to read content that breaks things down so well, making it easy for readers to grasp even complex ideas. I also found the practical tips you’ve shared to be very helpful. Looking forward to more informative posts like this! Keep up the good work!