CODEWITHSUNDEEP
javascriptjquerypluginsjquery-plugins
Joshua Bambrick
Joshua Bambrick

Reputation: 2699

Access jQuery Object From Plugin's Secondary Function

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)

Upvotes: 2

Views: 1027

Answers (1)

pete
pete

Reputation: 25081

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/

Upvotes: 4

Related Questions