appendTo () внутри $ .each в jquery, кажется, вызывает мерцание - PullRequest
Новая
       10

appendTo () внутри $ .each в jquery, кажется, вызывает мерцание

3 голосов
/ 30 марта 2010

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

Но это тоже не останавливает мерцание ...

Ответы [ 2 ]

5 голосов
/ 30 марта 2010

Присоединение к 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 и затем удалить этот стиль после выполнения добавления, чтобы посмотреть, помогает ли это с мерцанием.

1 голос
/ 30 марта 2010

что по этому поводу: 

var divs = '',
    $result = $("#ResultsDiv"),
    $parent = $result.parent();

    $result.empty().detach();

        $.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>';
        });
        $result.append(divs);
        $parent.append($result);
...