Search jQuery

jQuery Forum

Returning - return this.each(function()

in Developing jQuery Plugins • 7 years ago

Hello,

I have a contrived example of a plugin that does run fine. My question is regarding returning something when the each loop is running specifically this vs $(this) .

Here is the code below:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div>1</div>
<div>9</div>
<div>2</div>
<script>
//You need an anonymous function to wrap around your function to avoid conflict
(function($){
    //Attach this new method to jQuery
        $.fn.extend({
         //This is where you write your plugin's name
            mfp: function(ij) {
              var ij;
              console.log('call mfp');
            //Iterate over the current set of matched elements
                return this.each(function() { // Always use this.each ?
                 console.log('call mfp for each ele');
                 console.log(this);
                 //console.log($(this));
                 $(this).addClass( "selected" );
                // this.addClass( "selected" );
                 this.innerHTML=this.clientWidth + ij;
                 //console.log('call mfp for each ele');
               // console.log(ij);
                 //code to be inserted here
                });
         }
});
//pass jQuery to the function,
//So that we will able to use any valid Javascript variable name
//to replace "$" SIGN. But, we'll stick to $ (I like dollar sign: ) )
})(jQuery);
$(document).ready(function(){
$('div').mfp(5);
});
</script>
</body>
</html>

So you see in the code above I am using the .each loop like so:
return this.each(function() {

Is there ever a time you would use the each loop like so?
return $(this).each(function() {

Thanks,
Jim