2012-01-18 67 views
4

下面是代碼塊這裏的jQuery代碼有區別嗎?

$('ul.filter li').each(function() { 
    $(this).click(function(e) { //do something }); 
}); 

這裏是代碼塊B

$('ul.filter li').click(function(e) { //do something }); 

不把這些做同樣的事情?這個比那個好嗎?哪一個更好/更快的方法? 我會假設塊b,因爲它有更少的代碼,但我想在這裏確認,謝謝

回答

7

您看到的效果將是相同的,但在第一種情況下,每個li元素都會分配一個新函數,因爲您正在each回調中創建函數對象。

在第二種情況下,只存在事件處理程序的一個副本,這意味着它使用的內存總量較少(儘管這可能無法測量)。

內部,click calls on(jQuery的1.7),這是iterating over the elements via each as well

return this.each(function() { 
    jQuery.event.add(this, types, fn, data, selector); 
}); 

這與許多jQuery方法的情況下(最常見的文檔中說明),所以你通過讓儲蓄和記憶jQuery隱式地做到這一點。

+0

我無法解釋它,但我可以彌補它... – 2012-01-18 16:50:11

+0

也許有人沒有線索誰認爲他有線索,發生在我之前:)雖然有很多細微的差異,主要區別是一個新的功能創建對於每個元素+1 – Esailija 2012-01-18 17:08:05

2

他們都會有同樣的效果。

我更喜歡第二種,因爲它更簡潔,而且您正在創建一個匿名函數來處理點擊,而不是每個元素的匿名函數。

+0

感謝確認 – Huangism 2012-01-18 16:45:01

1

對於jquery哲學,第二個更好,因爲它更短。

1

兩者大致相同,並給出相同的結果。第二個代碼片段也將在內部運行each循環,並將點擊處理程序分配給每個li元素。

但是,第二個代碼片段非常清晰和簡單。

+1

嚴格來說,第二個片段將爲每個元素分配_exact same_ click處理函數,而第一個元素爲每個元素創建一個新的(但是相同的)函數。第二個因此更高效。 – Alnitak 2012-01-18 16:48:44

0

第二種用法稱爲「隱式迭代」,是jQuery的基石之一。

例如,JavaScript的通用指南中,第6版,P.530 jQuery的基礎:

儘管每個()方法的功率,這不是很常用, 因爲通常jQuery方法在一組匹配的元素上隱式地迭代,並對它們全部進行操作。您通常只需要 使用each()如果您需要以不同的方式操作 中的匹配元素。即使這樣,你可能不需要調用each(),因爲一個jQuery方法允許你傳遞一個回調函數。

http://jqfundamentals.com/chapter/jquery-basics

隱迭代意味着,當你調用該 選擇一個setter方法爲jQuery將自動遍歷在選擇所有 的元素。這意味着,當您想對某個選擇中的所有元素執行某些操作時,您不必在選擇中的每個項目上調用 上的setter方法 - 只需調用 選擇本身的方法,並且jQuery爲你迭代元素。

通常,當庫有此內置因爲這樣做的標準方式,它會在一般的更好,更快,否則他們就不會在建造它。