自定义 jQuery 过滤器需要优化答案

【问题标题】：Custom jQuery filter needs optimization自定义 jQuery 过滤器需要优化
【发布时间】：2011-10-20 01:07:16
【问题描述】：

在下面的代码中，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();
        }
    });
};

有什么方法可以优化这一点并更有效地进行搜索吗？

【问题讨论】：

标签： jquery performance filter

【解决方案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);

【讨论】：

你能举一个@Darhazer的例子吗？
@adamyonk，我添加了一个示例。如果您需要任何进一步的帮助，请告诉我。请注意，代码假定所有类为block 的div 都在一个id 为container 的div 中。

【解决方案2】：

不确定，但我会编写这样的代码；

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

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

【讨论】：

text.toLowerCase().indexOf(text) 没有意义
是的，我知道，遗憾的是我不太擅长 vanilla JS，我编写这个代码只是为了展示我如何使用选择器。

【解决方案3】：

在 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，但其他浏览器可能会更慢。

【讨论】：