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 回答