Пользовательский фильтр jQuery нуждается в оптимизации

Question

В приведенном ниже коде FriendBlocks имеет более 800 элементов, которые выглядят так:

<div class='block'>
    <span class='title'>Some Name</span>
    <img src='some.img' />
</div>

И я пытаюсь отфильтровать их с помощью приведенного ниже кода. Это работает, но очень медленно и иногда вылетает из браузера.

friendBlocks = friendform.find('.block');
filterFriends = function(text) {
    friendBlocks.each(function() {
        var block;
        block = $(this);
        if (block.children('.title').text().toLowerCase().indexOf(text) >= 0) {
            block.show();
        } else {
            block.hide();
        }
    });
};

Есть ли способ оптимизировать это и сделать поиск более эффективным?

Answer 1

Не применяйте манипуляции с каждым предметом в режиме реального времени!Клонируйте узел, содержащий блоки div, выполните операцию и замените исходный DOM.

Что-то вроде (не проверено, просто пример):

friendform   = $('#container').clone();
friendBlocks = friendform.find('.block');
filterFriends = function(text) {
    friendBlocks.each(function() {
        var block;
        block = $(this);
        if (block.children('.title').text().toLowerCase().indexOf(text) >= 0) {
            block.show();
        } else {
            block.hide();
        }
    });
};
$('#container').replaceWith(friendform);

Answer 2

Это заметно намного быстрее, чем ваш оригинальный код при тестировании в jsfiddle:

var blocks = $('div.block');
var foundBlocks = blocks.filter(function() {        
    return $('span.title', this).text().toLowerCase().indexOf(text) >= 0;
});    
foundBlocks.show();    
blocks.not(foundBlocks).hide();

Пример JSFiddle

Я попытался изменить его, чтобы он клонировался, а затем сделалпоказать / скрыть, но я не заметил какой-либо очевидной разницы в скорости.Хотя это был хром, другие браузеры могут работать медленнее.

Answer 3

Не уверен, но я бы написал что-то вроде этого;

$('.block .title').each(function(){
        var text = $(this).text();
        if (text.toLowerCase().indexOf(text) >= 0) { // not sure about here
            $(this).parent('div').show();
        } else {
            $(this).parent('div').hide();
        }
});

edit: код обновлен, хотя и не пробовал.Кодировано это только для показа селекторов.