功能很慢，有沒有更快的方法？ （使用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()函數中。示例 - >http://www.jsfiddle.net/2C6fB/5/

這可確保瀏覽器在操作時不會「掛起」。但是，當然這需要更長的時間才能完成整個任務。

Answer 2

我猜測發現是所有時間都消失的。

你能不能找到它的選擇器嗎？什麼是HTML？

Answer 3

您可以將帶鼠標的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/