1

私はjqueryアプリを持っています。ページには約1500個のチェックボックスがあります。テキストボックスでフィルターを検索し、関連しない行を非表示にしました.その作業..しかし..問題は、時間がかかることです(20秒以上)。私のコードは次のとおりです。

 $('#tb_values').keyup(function () { 
        $("#div_values input").each(
            function () {                 
                var value_a = $(this).attr('value');                   
                var tb_text = $('#tb_values').val();
                if (value_a.indexOf(tb_text, 0) == -1) {
                    $(this).parent().hide();
                }
                else {
                    $(this).parent().show();
                }
            });        

});

並列方法\より高速な方法でそれを行うにはどうすればよいですか? ありがとう

4

2 に答える 2

3

パフォーマンスの問題があります。各反復により、おそらくページ全体の再描画、リフロー/再レイアウトが発生します。一度だけ再描画を引き起こす別のアプローチを見つける必要があります。全体像が見えないので、あくまでも推測です。それは次のようなものかもしれません：

var html = '';
$("#div_values input").each(function () {  
    var $this = $(this);
    var value_a = this.value;  
    if (value_a.indexOf(tb_text) == -1) {
        html += '<div class="hidden"><input type="radio" ... /></div>';
    }
    else {
        html += '<div class="visible"><input type="radio" ... /></div>';
    }
});
$('#div_values').html(html);

このアプローチは非常に高速ですが、いくつかの短所があります。

  1. この構造を再作成するための別の関数が必要であり、ほぼすべての変更で再作成されます。
  2. 生成された要素のすべてのイベント ハンドラーとカスタム データは失われます。

また、コンテナのクローンを作成し、クローン構造に対して同じ操作を実行してから、新しいコンテナに置き換えることもできます。

var currentInstance = $('#div_values');
var clonedInstance = currentInstance.clone();
clonedInstance.find('input').each(...);
currentInstance.after(clonedInstance);
currentInstance.remove();

うまくいくはずですが、それほど速くはありません.html(...)

同様に、 documtFragmentsを見ることもできます。

于 2012-12-05T17:33:52.313 に答える
0

可能であれば、いくつかのセレクターをキャッシュして、ネイティブ メソッドを使用してみてください。

$('#tb_values').keyup(function () { 
        var tb_text = $('#tb_values')[0].value;
        $("#div_values input").each(
            function () {  
                var $this = $(this);               
                var value_a = this.value;  
                if (value_a.indexOf(tb_text) == -1) {
                    $this.parent().hide();
                }
                else {
                    $this.parent().show();
                }
            });        

});
于 2012-12-05T16:45:38.473 に答える