如何在使用jQuery懸停的同時提高效率/速度？

Question

在我寫的Web應用程序中，我有一系列創建網格的div。根據用戶輸入，網格是Y div的X div。使用jQuery懸停功能，我想改變一定距離內所有周圍div的背景顏色。基本上，如果我將鼠標懸停在一個div上，所有4行4列內的div也應該改變其背景顏色。我可以得到這個功能正常，但是當網格變成32×128的div時，存在真正的性能問題，並且懸停效果明顯滯後於鼠標。我幾乎可以肯定，這是因爲DOM中的大量類似的div的，因爲這個問題是不是有當電網是像30 30點

這是我的HTML的基本結構：

<div class="table_area"> 
    <div class="table_row" id="row-0"> 
     <div class="cap" data-row="0" data-column="0"></div> 
     <div class="cap" data-row="0" data-column="1"></div> 
     ... 
    </div> 
    <div class="table_row" id="row-1"> 
     <div class="cap" data-row="1" data-column="0"></div> 
     <div class="cap" data-row="1" data-column="1"></div> 
     ... 
    </div> 
    ... 
</div> 

爲了加速搜索DOM，我已經將每一行添加到數組中。因此，$('div.table_row[data-row="0"]')將在arr[0]。所以當第8行的div被徘徊時，我只需檢查arr[4]到arr[12]以獲取必要的div。

我認爲這會加快這個過程，因爲我消除了大量的搜索，但懸停中仍然存在非常明顯的滯後。

有沒有什麼公然錯誤的我如何設置？如果有問題，我正在使用最新版本的Chrome。

Answer 1

如果你添加一個類到每個瓶蓋，就可以動態地建立一個巨大的選擇：

var sel = ""; 
$(".cap").hover(function() { 
    var row = $(this).data("row"); 
    var col = $(this).data("column"); 
    sel = ""; 
    for(var i=row-2; i<=row+2; i++) 
    { 
     for(var j=col-2; j<=col+2; j++) 
     { 
     sel += ".r" + i + ".c" + j + ","; 
     } 
    } 
    sel = sel.slice(0,-1); 
    $(sel).css("background-color","blue"); 
},function() { 
    $(sel).css("background-color","white"); 
    }); 
}); 

例子：http://jsbin.com/izeyal/38/edit

由於我是動態創建的行和列，我也加入IDS到每一行，你可以通過改變選擇生成的代碼，如果你想使用的測試：

sel += "#r" + i + "c" + j + ","; 

爲了完整起見，我的代碼用於生成網格：

for(i=0; i<128; i++) 
    { 
    var newRow = $('<div/>', { 
    id: 'row-' + i 
}).appendTo('.table_area'); 
    for (j=0; j<32; j++) 
    { 
     var rowid= "r" +i + "c" + j; 
     $('<div/>', {id: rowid }).data("row",i).data("column",j).addClass("cap r" + i + " c" + j).appendTo(newRow); 
    } 
    } 

Answer 2

選擇類名稱是瀏覽器原生的，而元素中的數據選擇取決於jQuery中的循環。

使用類名來標記你的行和列，你的選擇器會更快。