自定义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);