Question

I have a simple jQuery plugin that I want to be able to call on multiple elements on a single page.

As of now I declare selectors explicitly, but I would like them to be relative to the object the plugin was called on. How can I do this?

(function($) {

    var MyPlugin = function(options){

        var plugin      = $(this); // The entire myPlugin object
        var element     = $("div#plugined div#element"); // An element in myPlugin
        var pluginChild = $( ); // Need selector of what plugin was called on + additional slider. ("div#plugined div#child")

        this.publicFunction = function() {
            // something...
        }

        var privateFunction = function() {
            // something private...
        }
    };

    $.fn.myPlugin = function(options) {

        var defaults = {
            // options
        }

        var options = $.extend(defaults, options);

        var myPlugin = new MyPlugin(options);

        $("div#plugined a.arrow").bind('click', function(e){ // Same problem. Need selector of what plugin was called on + additional slider. ("div#plugined div#child")
            e.preventDefault();
            myPlugin.publicFunction();
        });

        return myPlugin;
    };
})(jQuery);


<script type="text/javascript">
    $(window).load(function() {
        $('div#plugined').myPlugin();
    });
</script>

Answer 1

You would have to pass the current jQuery set along:

var myPlugin = new MyPlugin(this, options);

Inside myPlugin, do something like:

var MyPlugin = function($set, options){
    // ...
    var pluginChild = $set.find(".child");

Note that this in your code refers to the MyPlugin instance, so it doesn’t make much sense to call $(this).