カスタム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

わからないが、私はこのような何かをコーディングしたいです。

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

編集：コードは更新されましたが、試していません。セレクターを表示するためにこれをコード化しました。

Answer 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

それがクローン化され、その後、表示/非表示をしましたが、私は気付かなかったので、私はそれを変更してみましたスピードの明白な違い。これはクロームですが、他のブラウザは遅くなることがあります。