Access jQuery Object From Plugin's Secondary Function

Question

I am writing a jQuery plugin and the plugin has secondary functions (see jQuery support). I would like to be able to loop through the elements that the jQuery object contains in order to do something to each of them. However, I cannot see how to access the original object since, in the scope of the secondary function, this obviously refers to the plugin object.

Is there any way to access the original elements or am I going to have to start thinking about alternative (jQuery UI -esque) techniques?

The code looks something like this:

(function ($) {
    'use strict';
    var
        myNewPlugin,
        mySecondaryFunction;

    mySecondaryFunction = function () {
        // the secondary function

        // `this` refers to myNewPlugin
    };

    myNewPlugin = (function () {
        var closedPrivateVariables;

        return function () {
            // the function called from the jQuery object

            return this;
        };
    }());

    myNewPlugin.mySecondaryFunction;

    $.fn.myNewPlugin = myNewPlugin;
}(jQuery));

Not duplicates (questions which sound similar but are not the same)

pete · Accepted Answer · 2014-08-25 22:28:26Z

4

The standard plugin pattern is something like this:

(function ($) {
    $.fn.myPlugin = function (options) {
        var settings = {
            // settings
        };
        return this.each(function (i, elem) {
            //do stuff
        });
    };
})(jQuery);

To extend that for secondary functions and maintain a reference to the selected jQuery object, just capture a reference to it in the .each() iterator:

(function ($) {
    $.fn.myPlugin = function (options) {
        var settings = {
            // settings
        },
        self = null,
        selectedDOMElements = [],
        mySecondaryFunction = function () {
            var i = 0;
            //do more stuff
            self.css('display', 'inline-block'); //original jQuery object
            for (i = 0; i , selectedDOMElements.length; i += 1) {
                $(selectedDOMElements[i]).css('color', '#F00'); //individual child elements of the original jQuery object
            }
        };
        self = this; //store original jQuery object
        return this.each(function (i, elem) {
            selectedDOMElements.push(elem); //store individual child elements of the original jQuery object
            //do stuff
        });
    };
})(jQuery);

Mix and match to do what you're looking to do.

UPDATE:

Try this instead:

(function ($) {
    var self;
    $.fn.myPlugin = function (options) {
        var settings = {
            // settings
        };
        self = this; //store original jQuery object
        return self.each(function (i, elem) {
            //do stuff
        });
    };
    $.fn.myPlugin.mySecondaryFunction = function mySecondaryFunction(options) {
        var settings = {
            // settings
        };
        return self.each(function (i, elem) { //apply to original jQuery object
            //do stuff
        });
    };
})(jQuery);

//call like this
$(selector).myPlugin();
$(selector).myPlugin.mySecondaryFunction();

Example fiddle: http://jsfiddle.net/bv7PG/

edited Aug 25, 2014 at 22:28

answered Jun 24, 2013 at 20:52

pete

25.2k4 gold badges40 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Joshua Bambrick Over a year ago

I appreciate this but I don't think you quite follow. The secondary function should be callable by $('.aSelector').myNewPlugin.mySecondaryFunction(options); as opposed to just making a private function that the myNewPlugin can access when called; which, I think is what you are getting at.

Joshua Bambrick Over a year ago

I actually don't think there is any way to achieve what I am trying to do. jQuery UI doesn't allow this method of calling functions so I think that it cannot be done this way. At the minute I am just going down the jQuery UI -esque route (passing in the function to call as a string in the first param and passing in the options it accepts in the second param). myNewPlugin handles calling this function (pretty much what you were saying).

claustrofob Over a year ago

@pete $(selector).myPlugin.mySecondaryFunction(); will not work without calling $(selector).myPlugin(); first

Joshua Bambrick Over a year ago

Well that is an interesting technique and probably the closest thing you can get. Thanks a lot

gihanchanuka Over a year ago

+1 updated version works! JQuery also recommended to add public secondary functions as "$.fn.myPlugin.mySecondaryFunction = function(options) {}" Ref: learn.jquery.com/plugins/advanced-plugin-concepts/… (@pete Don't have to include secondary function name in both sides)

Collectives™ on Stack Overflow

Access jQuery Object From Plugin's Secondary Function

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related