更有效的方式來更新JavaScript中的多個元素？

我有6周的div ID」 #first，#second ... #sixth。更有效的方式來更新JavaScript中的多個元素？

如果我想每個這些div的執行功能，我會成立一個數組，每個持有div名稱。如果我想申請一個函數，我通過陣列中的每個元件設置一個for循環，進行迭代，並且（例如）改變背景顏色爲紅色：

function updateAllDivsInTheList() { 
    for(var i = 0; i < array.size; i++) 
    $("#"+array[i]).changeCssFunction(); 
    } 
}

每當創建一個新的div，我想將它添加到陣列

問題是，如果我有大量的divs在需要更新的時候（比如1200個div中的1000個），它可能是一個痛苦/性能坦克必須順序遍歷數組中的每個單元。有更新多個div的替代方法，更有效的方法或數據結構嗎？也許除了數組之外還有其他更高效的數據結構？或者是我正在做的最有效的方式？

來源

2012-06-27 Rolando

爲什麼你有1200個div？我會說你除了與陣列的努力工作之外還有其他問題。 – gdoron

如果你想遍歷1200個元素，寫一個專門的函數可能會更好，它沒有jQuery/jQuery插件的開銷。 –

@RobW。我會說：_「你不想迭代超過1200個元素。「_ – gdoron

您應該緩存您的jQuery對象，以便您的名稱列表成爲jQuery對象的列表。遍歷1000個項目的數組很快。每次構建1000個新的jQuery對象都很慢。

var names = [ "one", "two", ..., "six" ]; 

// Turn the array of strings into an array of their corresponding jQuery ele 
var $divs = $.map(names, function (v) { return $("#" + v); });

您還可以將多個ID一起鏈接到一個選擇器中，並避免（外部）循環; jQuery將（可能）仍將內部實現爲一個循環。

$('#one, #two, #three').changeCssFunction();

注意更新DOM千遍會是緩慢的，更多的是在一些瀏覽器比其他。您可能會考慮重新考慮代碼，以便從某個父對象添加或刪除某個類，從而允許一些新的CSS選擇器通過單個DOM更新來匹配所有子元素。

來源

2012-06-27 21:10:41 meagar

你可以提供一些你認爲是「緩存」的例子嗎？ – Rolando

@gdoron不是我的回答：p –

'$（arr）'沒有官方的支持，我推薦使用'$ .map'代替 – pimvdb

更有效的方法可能是不在客戶端執行此操作。在Internet Explorer中，與dom的每次交互（檢查css類，更改css，檢查屬性）都可能導致dom刷新，從而導致頁面「凍結」。如果你仍然打算這樣做，你應該給每個div的通用類名稱，並使用jQuery來選擇該類名稱。然後你可以迭代jquery對象的返回列表。

來源

2012-06-27 21:13:43 scrappedcola

var divs$ = []; 
$('div.someClass').each(function(i,e) { 
    divs$.push($(e)); 
}); 

function updateAllDivsInTheList() { 
    for(var i = 0; i < array.size; i++) 
    divs$[i].changeCssFunction(); 
    } 
}

來源

2012-06-27 21:16:11 Ceres

當調用一個jQuery方法時，它將在內部遍歷集合中的所有匹配元素。因此，這將是更有效的構建只有一個jQuery對象包含所有的元素：

$(array.map(function(id){return "#"+id;}).join(", ")).changeCssFunction();

這將是很容易利用更簡單的選擇器，例如通過使用一個類。如果你想多次使用這個方法，一定要緩存jQuery對象。

如果您想要真正提升性能，請不要使用jQuery。您可以直接使用本地DOM方法應用樣式更改（當然這取決於它們的複雜性和跨瀏覽器安全性），或者您可以嘗試一下，而不是單個元素的樣式屬性。

來源

2012-06-27 21:20:54 Bergi

更有效的方式來更新JavaScript中的多個元素？

回答

相關問題