3

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是好还是坏这样做......如果它是坏的，可以做些什么来让我的 divappendTo()在循环之后，这样我就不会闪烁......

编辑：（基于答案）

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

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

4

2 回答 2

5

追加到 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样式，然后在执行附加后删除该样式，看看这是否有助于闪烁。

于 2010-03-30T11:58:38.477 回答
1

那这个呢：

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);
于 2010-03-30T13:06:11.257 回答