"this" in the return statement in a function .fn in jquery?

Question

why returning "this" in this function here:

(function($) {

  $.fn.menumaker = function(options) {

      var cssmenu = $(this), settings = $.extend({
        title: "Menu",
        format: "dropdown",
        sticky: false
      }, options);

      return this.each(function() {

this is the "DOM element" ? If we want to use the content of the function, why not referencing $(this) to use the element we are targeting, instead of this?

Thanks

`this` inside the plugin ***is*** a jQuery object, not a DOMElement, hence why the chaining works when returning this. — Rory McCrossan, Jan 04 '16 at 17:34
https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/ch2.md — taylorc93, Jan 04 '16 at 17:34
I think you may have been confused by the fact that the author of that code has also used `var cssmenu = $(this)` - they could have equally just done `var cssmenu = this`. — James Thorpe, Jan 04 '16 at 17:34

score 6 · Accepted Answer · answered Jan 04 '16 at 17:33

jQuery methods (properties of $.fn) aren't like jQuery event handler callbacks. The value of this is the jQuery object itself, not a DOM element.

The $.fn object is the protoype object for jQuery instances, so when you make a jQuery object

var jq = $(something);

then call a jQuery method:

jq.whatever();

the natural this rules of JavaScript determine that whatever() will be invoked with the jQuery object as the value of this.

"this" in the return statement in a function .fn in jquery?

1 Answers1