本文介绍了appendTo()jQuery中$。每个里面似乎导致闪烁的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

appendTo()导致闪烁时,它里面$。每个....

appendTo() causes flicker when it is inside $.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 $。每个是好/坏这样做...如果它是坏的
有什么可以做,使我的div appendTo()后循环,这样我它不会闪烁......

Right now i am appending every new div to #ResultsDiv inside$.each is it good/bad to do so... If it is badWhat can be done to make my divs appendTo() after the loop so that i it wont flicker....

编辑:(基于答案)

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);

但是,这太不停止闪烁......

But that too doesn't stop the flicker...

推荐答案

追加到DOM是一个非常昂贵的任务在一个循环中执行特别。你应该尝试添加所有的结果字符串,然后每个循环之后做一附加:

Appending to the DOM is a very expensive task to perform especially in a loop. You should try to add all your results to a string and then do one append after the each loop:

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()方法执行相同的任务。主要的区别是在语法具体地,在内容和目标的位置。

The .append() and .appendTo() methods perform the same task. The major difference is in the syntax-specifically, in the placement of the content and target.

也可以尝试加入显示:无 resultsdiv 然后删除样式执行追加后看如果这有助于闪烁。

Also try adding display:none to the resultsdiv and then remove that style after you perform the append to see if that helps with the flickering.

这篇关于appendTo()jQuery中$。每个里面似乎导致闪烁的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-18 13:58