0

我在 JQuery 和 JS 中有这样的功能。我有一个带有复选框的 div 列表，并将它们添加到我的列表中。这适用于 40 个 div，但有时我有 2,000 个，它会使 Chrome 崩溃并在 FF 上爬行。无论如何让这更快？

function AddToList()
{
    $('div[name="notadded"] input:checked').each(function(index)
    {
        var html = $(this).parents('div[name="notadded"]').html();

        //get rid of the class that is used to gather checkboxes in select/deselect
        html = html.replace('listvars', 'addedvars');

        var var_id = $(this).attr('value');

        var new_html = '<div id="added_' + var_id + '" name="added">' + html + '</div>';

        //hide the one we are adding and remove the check
        $(this).parents('div[name="notadded"]').hide();
        $('div[name="notadded"] input[value="' + var_id + '"]').attr('checked', false);

        //add the vars to the added list
        $('.addedList').append(new_html);

        step3 = '3b';
    });
}
4

1 回答 1

2

您正在执行 2000 次 DOM 操作，这不是一个好方法。尝试进行 2,000 次字符串操作和 1 次 DOM 插入。

function AddToList()
{
    var new_html = "";

    $('div[name="notadded"] input:checked').each(function(index)
    {
        var html = $(this).parents('div[name="notadded"]').html();

        //get rid of the class that is used to gather checkboxes in select/deselect
        html = html.replace('listvars', 'addedvars');

        var var_id = $(this).attr('value');

        var new_html += '<div id="added_' + var_id + '" name="added">' + html + '</div>';

        //hide the one we are adding and remove the check
        $(this).parents('div[name="notadded"]').hide();
        $('div[name="notadded"] input[value="' + var_id + '"]').attr('checked', false);

        //add the vars to the added list   
        step3 = '3b';
    });

    $('.addedList').append(new_html);
}

此外，根据经验，取消选中 2,000 个复选框会严重占用性能。我敢打赌把这条线去掉：

$('div[name="notadded"] input[value="' + var_id + '"]').attr('checked', false);

会改变一切。我建议将此函数重写为字符串替换，这样会快得多。

于 2012-07-19T20:02:33.927 回答