jquery 中的 $.each 内的appendTo()似乎会导致闪烁

发布于 2024-08-27 06:37:36 字数 2310 浏览 11 评论 0原文

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 附加到 $.each 内部的 #ResultsDiv 是好是坏这样做...如果不好的话可以做些什么来使我的 div 在循环之后 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);

但这也不会'不要停止闪烁...

原文

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 :</span> <span class="resultfieldvalues">' + employee.Desig_Name + '</span><br /><br /><span id="SalaryBasis" class="resultfields">Salary Basis :</span> <span class="resultfieldvalues">' + employee.SalaryBasis + '</span><span class="resultfields" style="padding-left:25px;">Salary :</span> <span class="resultfieldvalues">' + employee.FixedSalary + '</span><span style="font-size:110%;font-weight:bolder;padding-left:25px;">Address :</span> <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 :</span> <span class="resultfieldvalues">' + employee.Desig_Name + '</span><br /><br /><span id="SalaryBasis" class="resultfields">Salary Basis :</span> <span class="resultfieldvalues">' + employee.SalaryBasis + '</span><span class="resultfields" style="padding-left:25px;">Salary :</span> <span class="resultfieldvalues">' + employee.FixedSalary + '</span><span style="font-size:110%;font-weight:bolder;padding-left:25px;">Address :</span> <span class="resultfieldvalues">' + employee.Address + '</span></div>';
            });
            $("#ResultsDiv").append(divs);

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

゛时过境迁 2024-09-03 06:37:36

附加到 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 :</span> <span class="resultfieldvalues">' + employee.Desig_Name + '</span><br /><br /><span id="SalaryBasis" class="resultfields">Salary Basis :</span> <span class="resultfieldvalues">' + employee.SalaryBasis + '</span><span class="resultfields" style="padding-left:25px;">Salary :</span> <span class="resultfieldvalues">' + employee.FixedSalary + '</span><span style="font-size:110%;font-weight:bolder;padding-left:25px;">Address :</span> <span class="resultfieldvalues">' + employee.Address + '</span></div>';
        });
$('#ResultsDiv').append(dataToAppend);
$('#ResultsDiv').removeAttr('style');

.append() 和 .appendTo() 方法执行相同的任务。主要区别在于具体的语法、内容和目标的位置。

另请尝试将 display:none 添加到 resultsdiv 中，然后在执行附加操作后删除该样式，看看这是否有助于解决闪烁问题。

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 :</span> <span class="resultfieldvalues">' + employee.Desig_Name + '</span><br /><br /><span id="SalaryBasis" class="resultfields">Salary Basis :</span> <span class="resultfieldvalues">' + employee.SalaryBasis + '</span><span class="resultfields" style="padding-left:25px;">Salary :</span> <span class="resultfieldvalues">' + employee.FixedSalary + '</span><span style="font-size:110%;font-weight:bolder;padding-left:25px;">Address :</span> <span class="resultfieldvalues">' + employee.Address + '</span></div>';
        });
$('#ResultsDiv').append(dataToAppend);
$('#ResultsDiv').removeAttr('style');

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.

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.

回复收藏 0 原文

是你 2024-09-03 06:37:36

这个怎么样：

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 :</span> <span class="resultfieldvalues">' + employee.Desig_Name + '</span><br /><br /><span id="SalaryBasis" class="resultfields">Salary Basis :</span> <span class="resultfieldvalues">' + employee.SalaryBasis + '</span><span class="resultfields" style="padding-left:25px;">Salary :</span> <span class="resultfieldvalues">' + employee.FixedSalary + '</span><span style="font-size:110%;font-weight:bolder;padding-left:25px;">Address :</span> <span class="resultfieldvalues">' + employee.Address + '</span></div>';
        });
        $result.append(divs);
        $parent.append($result);

what about this:

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 :</span> <span class="resultfieldvalues">' + employee.Desig_Name + '</span><br /><br /><span id="SalaryBasis" class="resultfields">Salary Basis :</span> <span class="resultfieldvalues">' + employee.SalaryBasis + '</span><span class="resultfields" style="padding-left:25px;">Salary :</span> <span class="resultfieldvalues">' + employee.FixedSalary + '</span><span style="font-size:110%;font-weight:bolder;padding-left:25px;">Address :</span> <span class="resultfieldvalues">' + employee.Address + '</span></div>';
        });
        $result.append(divs);
        $parent.append($result);

回复收藏 0 原文

~没有更多了~