jQuery extending $.fn with an object?

Question

Using this Difference between jQuery.extend and jQuery.fn.extend? Is there a way to have something like $('.selector').Group.Method(); and $('.selector').Group.Method2();

Right now I have a this in a main script

function Forty() {};

var Forty = new Forty();

(function(site) {
    $.extend(Forty, {
        getBaseUrl: function(extra) {
            extra = typeof extra !== 'undefined' ? extra : '';
            return Forty.get('baseUrl') + extra;
        },
        get: function($what) {
            return site[$what];
        }
    });
})(site);

Then later in that file I have:

$.extend(Forty, {
    flyOut: function() {
        $(this).on('click', function() {
            $('html').toggleClass('nav-open');
        });
    }
});

And at the very end I have:

$.fn.extend({Forty: Forty});

Right before I have this line:

$('.selector').Forty.flyOut();

So I'd really like something like $('.selector').Forty.flyOut();

Is something like this possible?

Yes, but you'll probably have to refactor your code. The word you need to google is "chaining" wrt jQuery plugins. — Andy, Oct 09 '14 at 12:13
And, **NO**, it's [possible but you shouldn't do it](https://stackoverflow.com/questions/15884096/organize-prototype-javascript-while-perserving-object-reference-and-inheritance) — Bergi, Oct 10 '14 at 08:54
That's the case with Prototype, would this be the same with jQuery? — Marais Rossouw, Oct 10 '14 at 23:15

score 0 · Answer 1 · answered Oct 10 '14 at 07:53

I managed to solve this, by going:

var Forty = {fn:{}};

$.fn.extend({Forty: function() {return $.extend(this, Forty.fn);}});

Then assigning my own functions like so:

Forty.fn.flyOut = function() {
    $(this).on('click', function() {
        $('html').toggleClass('nav-open');
    });

    return this;
}

and using them like:

$('.js-toggle-nav').Forty().flyOut();

This seemed to work epicly!

jQuery extending $.fn with an object?

1 Answers1