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 Example

我尝试更改它以便克隆然后进行显示/隐藏但我没有发现任何明显的速度差异。虽然这是Chrome，但其他浏览器可能会更慢。

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

编辑：代码已更新，但未尝试过。编码只是为了显示选择器。

自定义jQuery过滤器需要优化

3 个答案: