appendTo() inside $.each in jquery seems to cause flicker....

Posted by Pandiya Chendur on Stack Overflow See other posts from Stack Overflow or by Pandiya Chendur
Published on 2010-03-30T11:44:39Z Indexed on 2010/03/30 12:03 UTC
Read the original article Hit count: 263

Filed under:
|

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

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

EDIT:(based on answer)

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...

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about appendto