這個jquery更快嗎？

Question

我以前寫的：

$('#MyDiv .TheClass').eq(TheIndex).removeClass('ClassA'); 
$('#MyDiv .TheClass').eq(TheIndex).removeClass('ClassB'); 
$('#MyDiv .TheClass').eq(TheIndex).addClass('ClassC'); 

$('#MyDiv .TheClass').eq(TheIndex).children().each(function() { 
//do something here 
}); 

，現在我寫這篇文章：

$('#MyDiv .TheClass').eq(TheIndex) 
    .removeClass('ClassA ClassB') 
    .addClass('ClassC') 
    .children().each(function() { 
     // do something here 
    }); 

是後者要運行快於前者？只是好奇。

Answer 1

有一兩件事是肯定的，這個代碼會查找元素的每一行：

$('#MyDiv .TheClass').eq(TheIndex).removeClass('ClassA'); 
$('#MyDiv .TheClass').eq(TheIndex).removeClass('ClassB'); 
$('#MyDiv .TheClass').eq(TheIndex).addClass('ClassC'); 

在鏈接，如果發現該元素是隻有一次，這是快於：

$('#MyDiv .TheClass').eq(TheIndex) 
    .removeClass('ClassA ClassB') 
    .addClass('ClassC') 
    .children().each(function() { 
    // do something here 
}); 

Answer 2

你可以試試分析它，但是在這種情況下，差異相當簡單。在第一種情況下，jQuery必須去弄清楚什麼對象滿足$('#MyDiv .TheClass')四次，而在第二種情況下，它只需要做一次，然後簡單地將對象傳遞給下一個方法。所以是的，第二個更快（但不是太多）。

Answer 3

查詢後查詢速度慢，效率低。鏈接很難閱讀，也很難調試。

這裏是另一種選擇：

$MyDiv = $('#MyDiv .TheClass'); 

    $MyDiv.eq(TheIndex).removeClass('ClassA'); 
    $MyDiv.eq(TheIndex).removeClass('ClassB'); 
    $MyDiv.eq(TheIndex).addClass('ClassC');