經常在JQuery外掛中發現一個問題，為什麼方法返回的都是return this.each()

jQuery.fn.test= function(){ 
   this.css("background","#ff0");//因為呼叫物件是JQuery物件，這裡面的this為jquery物件，而不是dom物件 
   return this.each(function(){  
          alert("this"+this+this.innerHTML); //each方法迴圈中的this為dom物件。 
   }); 
};

這裡就要說到JQuery的一大特性，鏈式呼叫。

<div id="color">
    <p id="c1">1111</p>
	<p id="c2">2222</p>
	<p id="c3">3333</p>
</div>

<script type="text/javascript">

$("#color").find('#c1').css("color","red").next().css("color","blue").next().css("font-size","20px");

</script>
 

JQuery中的大多方法，返回的都是呼叫者本身，所以我們可以通過一條語句完成很多的操作。作為JQuery外掛同時也要滿足這點，所以我們也要返回一個JQuery物件。

那麼有個疑問，既然要返回JQuery物件，我幹嘛不直接返回 return this?

答：this此時就是一個JQuery物件 ，$.each()同樣是JQuery遵循鏈式方法，所以呼叫this.each()的結果 就是 return this.

這樣簡寫不僅先執行了each內的方法又return this,

return this.each(function() {
    $(this).append(' - ' + $(this).data('x'));
});
           
 

等價於

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