2012-03-10 45 views
8

是的,大概有很多的話題,但我仍然沒有得到它:jQueryPlugin:返回此VS回報this.each()

我準備了兩個的jsfiddle:

return this

return this.each()

有什麼區別? 有很多答案,但我的例子顯示相同的輸出。所以這些答案中的一些可能是錯誤的!?


what does "return this.each()" do in jQuery?

「它允許一個叫上一堆元素的插件或事件,然後應用相同的函數或事件對所有這些」 - >工作的還有「return this」!

「它可以讓你把多個功能」 - >同樣在這裏

「允許你做這樣的事情:$(」 mySelector 「)富()顯示();」。 - , - >我仍然可以到這個問題,以及當我返回「這個」


我還創造了另一個的jsfiddle顯示 - 在我看來 - 如果你包裝你的代碼到也沒關係return this.each();

http://jsfiddle.net/7S3MW/1/

的Chrome瀏覽器控制檯顯示的也是相同的輸出!

那有什麼區別?

+0

case就是簡單,如果你想要一個節點特定的過濾器...試試在沒有'each'的日誌中記錄'$(this).text()' – charlietfl 2012-03-10 04:41:48

回答

12

兩件事情:

  1. 你的例子是有缺陷的,他們做同樣的事情到每個元素。
  2. 真正的問題不是return thisreturn this.each,問題是thisthis.each

對於(1),考慮這個插件之間的差:

(function($) { 
    $.fn.mangle = function(options) { 
     this.append(' - ' + this.data('x')); 
     return this; 
    }; 
})(jQuery); 

演示:http://jsfiddle.net/ambiguous/eyHeu/

而這個插件:

(function($) { 
    $.fn.mangle = function(options) { 
     return this.each(function() { 
      $(this).append(' - ' + $(this).data('x')); 
     }); 
    }; 
})(jQuery); 

演示:http://jsfiddle.net/ambiguous/5dMMH/

所以你看,你需要使用this.each,如果你需要對待this設置不同的單個元素。如果您的插件必須將元素特定的數據附加到每個元素,則會產生類似的效果:如果您沒有使用each,那麼您最終會將完全相同的數據附加到this中的所有元素,讓你感到困惑,爲什麼信息在各地流血。

對於(2),這並不重要,如果你return thisreturn this.each(...因爲x.each(...)回報x反正。

+0

謝謝,這是_exactly_我​​正在尋找:) – 2012-03-10 04:45:45

0

它們都完全一樣。 .each()回報this,所以return this.each()是完全一樣的this.each();return this;

編輯:您的最新小提琴的makeRed方法不返回this,因此沒有可鏈接。

+0

喲,改變它,第三小提琴只是檢查它是否相等,所以在互聯網上有大約一千個教程,告訴錯誤的東西? – 2012-03-10 04:41:39

+1

類別。返回值將是相同的,但總體行爲可能會根據插件的功能而有很大不同。 – 2012-03-10 04:43:37

0

讓我給的代碼,你兩個 「相當於」 片,可以澄清你的問題:

使用jQuery 「每個」 功能:

(function($) { 
    $.fn.mangle = function(options) { 
     return this.each(function() { 
      $(this).append(' - ' + $(this).data('x')); 
     }); 
    }; 
})(jQuery); 

沒有jQuery的 「每個」 功能:

(function($) { 
    $.fn.mangle = function(options) { 
     var objs = this; 
     for (var i=0; i<objs.length; i++) { 
      var obj = objs[i]; 
      $(obj).append(' - ' + $(obj).data('x')); 
     }; 
     return this; 
    }; 
})(jQuery); 

因此,基本上,each函數用於施加一些代碼包含在this對象的所有元素(如通常this是指一組由一個jQuery選擇返回的元素)和基準返回thiseach函數始終返回參考-to允許鏈calls-

作爲一個方面說明:第二種方法(- 比前一個(for環 -)快(尤其是在舊的瀏覽器) - each功能 -)。