jquery中的$ .each中的appendTo()似乎会导致闪烁

Question

appendTo()会在$ .each中导致闪烁....

$.each(jsob.Table, function(i, employee) {
                $('<div class="resultsdiv"><br /><span class="resultName">' + employee.Emp_Name + '</span><span class="resultfields" style="padding-left:100px;">Category&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.Desig_Name + '</span><br /><br /><span id="SalaryBasis" class="resultfields">Salary Basis&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.SalaryBasis + '</span><span class="resultfields" style="padding-left:25px;">Salary&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.FixedSalary + '</span><span style="font-size:110%;font-weight:bolder;padding-left:25px;">Address&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.Address + '</span></div>').appendTo('#ResultsDiv');
            });

现在我将每个新div添加到#ResultsDiv内部$.each是好/坏这样做...如果它是坏的什么可以做我的divs appendTo()循环后让我不会闪烁....

编辑:(根据答案)

var divs = '';
            $.each(jsob.Table, function(i, employee) {
                divs += '<div class="resultsdiv"><br /><span class="resultName">' + employee.Emp_Name + '</span><span class="resultfields" style="padding-left:100px;">Category&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.Desig_Name + '</span><br /><br /><span id="SalaryBasis" class="resultfields">Salary Basis&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.SalaryBasis + '</span><span class="resultfields" style="padding-left:25px;">Salary&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.FixedSalary + '</span><span style="font-size:110%;font-weight:bolder;padding-left:25px;">Address&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.Address + '</span></div>';
            });
            $("#ResultsDiv").append(divs);

但这也不能阻止闪烁......

Answer 1

附加到DOM是一项非常昂贵的任务,尤其是在循环中执行.您应该尝试将所有结果添加到字符串中,然后在每个循环后执行一个追加:

var dataToAppend = '';
$.each(jsob.Table, function(i, employee) {
            dataToAppend += '<div class="resultsdiv" style="display:none"><br /><span class="resultName">' + employee.Emp_Name + '</span><span class="resultfields" style="padding-left:100px;">Category&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.Desig_Name + '</span><br /><br /><span id="SalaryBasis" class="resultfields">Salary Basis&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.SalaryBasis + '</span><span class="resultfields" style="padding-left:25px;">Salary&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.FixedSalary + '</span><span style="font-size:110%;font-weight:bolder;padding-left:25px;">Address&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.Address + '</span></div>';
        });
$('#ResultsDiv').append(dataToAppend);
$('#ResultsDiv').removeAttr('style');

.append()和.appendTo()方法执行相同的任务.主要区别在于语法特定,内容和目标的放置.

也可以尝试添加display:none到resultsdiv,然后删除该样式执行追加之后,看看是否有闪烁的帮助.