$(this) in plugin options

Question

I'm new to writing jQuery plugins, and I'm confused as to how to let users use $(this) in their options. As a simple (and redundant) example, say I wanted to let a user append their selection's text to an element they supply in their options, like so:

$(function() {
   $('#stuff').appender({ 'placement' : this });
});

And the plugin code is:

(function($) {
    $.fn.appender = function(options) {

        var opts = $.extend({}, $.fn.appender.defaults, options);

        return this.each( function() {
            var $el = $(this);
            $(opts.placement).append( $el.text() );
        });

    };

    $.fn.appender.defaults = {
        'placement' :   'body',
    }
})(jQuery);

If the user supplies 'body' or $('#wrapper') for 'placement' in the plugin options, of course it works as expected. But when using 'this' or '$(this)', it refers to the document itself rather than the element in the selection.

This is a pretty crappy example of a plugin, but the thing I would like to learn is how to allow plugin users to use $(this) or its attributes as values for options.

Any ideas?

Answer 1

You can't do this inside your plugin, unless you give it a default or a special string name, for example where "self" translates to this. To pass it as a reference they'll need a .each(), like this:

$('#stuff').each(function() }
  $(this).appender({ 'placement' : this });
});

For the inside the plugin option, I would say specifying nothing defaults to this, so it would look like this:

$(opts.placement || this).append($el.text());
//call looks like this:
$('#stuff').appender();

Or have a special string (which is less intuitive, I'd go with the default above), it would look something like this:

$(opts.placement === "self" ? this : ops.placement).append($el.text());
//call looks like this:
$('#stuff').appender({ placement: 'self' });