jquery - .each() jquery 中的并行选项

Question

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

});

我怎样才能以并行方式\更快的方式做到这一点？谢谢

Answer 1

您遇到性能问题。每次迭代都会导致整个页面的重新绘制、回流/重新布局。您应该找到另一种方法，该方法只会导致重绘一次。我没有看到完整的图片，所以我只能猜测。它可能是这样的:

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 .