功能很慢，有更快的方法吗？ （使用jQuery 1.4.2）

Question

以下功能至少需要3秒才能运行（在500个表行上）。是否可以更快地完成此功能？

function prepareTable() {
    var groupIndex = 0;
    $("#row tbody tr").each(function(index) {
    // each row gets a unique id
    // remove default css styles for table rows
    // read out hidden value, that stores if row is a group
    var group = $(this).attr('id', 'node-'+index).removeClass("odd event").find('td :hidden').attr('value');
    // if it is a group, add special styles to row and remember row index
    if (group == 'true') {
        groupIndex = index;
        $(this).addClass('odd').find("td:first")
            .mouseenter(function() {
                $(this).parent().addClass("swGroupLink");
            })
            .mouseleave(function() {
                $(this).parent().removeClass("swGroupLink");
        });
    } else {
        // make all following rows to children of the previous group found
        $(this).addClass('even child-of-node-' + groupIndex);
    }   
    });
}

Answer 1

我建议进行两项改进：

• 缓存DOM References
• 在您的桌旁工作离线

示例

function prepareTable() {
   var groupIndex = 0;
   var $mytable = $('#row'),
       $parent  = $mytable.parent();

   $mytable = $mytable.detach();

   $mytable.find('tr').each(function(index) {
      var $this = $(this);
      var group = $this.attr('id', 'node-'+index).removeClass("odd event").find('td :hidden').attr('value');
// if it is a group, add special styles to row and remember row index
   if (group == 'true') {
       groupIndex = index;
       $this.addClass('odd').find("td:first")
           .mouseenter(function() {
               $this.parent().addClass("swGroupLink");
           })
           .mouseleave(function() {
               $this.parent().removeClass("swGroupLink");
       });
   } else {
       // make all following rows to children of the previous group found
       $this.addClass('even child-of-node-' + groupIndex);
   }   
   });

   $parent.append($mytable);
}

我添加了一个变量$this，用于在$(this)循环中缓存.each()。我还添加了$mytable和$parent。 $mytable存储#row元素，$parent存储来自#row的父节点。这是因为我从DOM中删除了整个元素，完成了工作并将其重新附加到父级。

测试环境：http://www.jsfiddle.net/2C6fB/4/

如果仍然太慢，那么您还有其他选择。首先，看看你是否可以将循环分成更小的部分。您可以使用asychronous回调（例如setTimeout）对此进行大量优化。这可能是一个棘手的业务，我需要更详细地了解您的代码，但一般情况下，您可能只想将整个循环包装到单个setTimeout()函数中。示例 - ＆gt; http://www.jsfiddle.net/2C6fB/5/

这可确保浏览器在操作时不会“挂起”。但当然，这需要更长的时间来完成整个任务。

Answer 2

你可以在live event中使用mouseenter和mouseleave，这样它就不会用prepareTable函数执行，你可以将它放在文档就绪函数中。

 $("#row tbody tr td.trueInPrepareTable")
  .live("mouseenter", function(event){      
               $(this).parent().addClass("swGroupLink");    
    }).live("mouseleave", function(event){      
               $(this).parent().removeClass("swGroupLink");    
    });

而不是从隐藏字段中获取组值，而是将此值放在rel，rev或title属性中。

    function prepareTableEdit() {
                var groupIndex = 0;
                $("#row tbody tr").each(function(index) {
                     groupIndex = index;
                     $(this).attr('id', 'node-'+ groupIndex ).removeClass("odd even");
                    if($(this).attr('rel') == 'true')
                    {                           
                        $(this).addClass('odd').find("td:first").addClass('trueInPrepareTable');                      }
                    else
                    {
                         $(this).addClass('even child-of-node-' + groupIndex).find("td:first").removeClass('trueInPrepareTable');  
                    }
                });

 }

结帐http://www.jsfiddle.net/raBGq/

Answer 3

我猜这个发现是所有时代都迷失的发现。

你能不能选择它而不是找到它。什么是HTML？