jquery中的$ .each中的appendTo（）似乎会导致闪烁

appendTo（）在$ .each中导致闪烁….

$.each(jsob.Table, function(i, employee) { $('

' + employee.Emp_Name + 'Category : ' + employee.Desig_Name + '

Salary Basis : ' + employee.SalaryBasis + 'Salary : ' + employee.FixedSalary + 'Address : ' + employee.Address + '
').appendTo('#ResultsDiv'); }); 

现在我将每个新的div附加到$.each #ResultsDiv里面的$.each这样做是好还是坏…如果它是坏的可以做什么来使我的divs在循环后的appendTo()让我不会闪烁….

编辑:(根据答案）

 var divs = ''; $.each(jsob.Table, function(i, employee) { divs += '

' + employee.Emp_Name + 'Category : ' + employee.Desig_Name + '

Salary Basis : ' + employee.SalaryBasis + 'Salary : ' + employee.FixedSalary + 'Address : ' + employee.Address + '
'; }); $("#ResultsDiv").append(divs); 

但这也不能阻止闪烁……

Answer 1

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

 var dataToAppend = ''; $.each(jsob.Table, function(i, employee) { dataToAppend += '

' + employee.Emp_Name + 'Category : ' + employee.Desig_Name + '

Salary Basis : ' + employee.SalaryBasis + 'Salary : ' + employee.FixedSalary + 'Address : ' + employee.Address + '
'; }); $('#ResultsDiv').append(dataToAppend); $('#ResultsDiv').removeAttr('style'); 

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

还可以尝试在resultsdiv添加display:none ，然后在执行追加后删除该样式，看看是否有助于闪烁。

Answer 2

那这个呢：

 var divs = '', $result = $("#ResultsDiv"), $parent = $result.parent(); $result.empty().detach(); $.each(jsob.Table, function(i, employee) { divs += '

' + employee.Emp_Name + 'Category : ' + employee.Desig_Name + '

Salary Basis : ' + employee.SalaryBasis + 'Salary : ' + employee.FixedSalary + 'Address : ' + employee.Address + '
'; }); $result.append(divs); $parent.append($result);