功能非常慢，有没有更快的方法？（使用jQuery 1.4.2）

以下函数至少需要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);
    }   
    });
}

---

我猜这个发现是一个所有时间都消失的地方

---

你不能用选择器代替查找。什么是HTML？

我建议两个改进：

• 缓存

  DOM引用

• 在您的桌旁工作离线

示例

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）
。我还添加了
$mytable
和
$parent
$mytable
存储
#行
元素，
$parent
存储
#行
中的父节点。这是因为我从DOM中删除了整个元素，完成工作并将其重新附加到父元素

测试环境：

如果这仍然太慢，您可以在这里选择其他选项。首先，看看是否可以将循环拆分为更小的部分。您可以通过使用
asycronous
回调（例如，
setTimeout
）对其进行优化。这可能是一项棘手的工作，我需要更详细地了解您的代码，但一般来说，您可能只想将整个循环包装到单个
setTimeout（）
函数中。示例->

这样可以确保浏览器在运行时不会“挂起”。当然，完成整个任务需要一点时间。
您可以使用live event将mouseenter和mouseleave带到外部，这样它就不会使用prepareTable函数执行，您可以将其放在document ready函数中

 $("#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');  
                    }
                });

 }

签出
所有500个表行都可见，或者您正在使用分页？我也在使用分页。thx的提示…然后你可以做处理表的可见部分只。我这样做，但有时客户希望有500行在一页；-）。现在我正在尝试是否有可能在可忍受的等待时间内。你的优化听起来对我很好。不幸的是，该功能现在大约慢了20%：-（（使用Firebug和Google Chrome开发工具测试）@史蒂文：听起来几乎不可能。我正在设置一个快速测试环境。@史蒂文：正如我预期的，我的版本比旧版本快50%左右。看，你需要打开firebug/chrome控制台才能看到结果。只需将底线注释出来/输入以测试不同的功能。奇怪！这是我在真实页面上的结果截图：@Stev恩：我在我的回答中添加了另一个解决方案，你可能会发现它更有用。但我不会将其作为“通用”解决方案。你仍然应该考虑你的循环，在那里你可以将其划分为子问题并进行优化。这主意不错，但执行时间几乎相同（-100到-200毫秒）检查。它需要160毫秒才能运行，比您的要快得多。您需要打开firebug控制台查看结果。您的新版本忽略了“节点的子节点-”查找所有500行需要80毫秒