get the div object that holds a jquery widget from inside the widget

Question

I have the following code:

<div id="widHolder"></div>
<script type="text/javascript" language="javascript">
    $('#widHolder').widgetName({
        optionOne: false,
        optionTwo: 1,
        onComplete: function (holder) { 
            // ... do something here with the 'widHolder' object such as $(holder).addClass(x,y) 
        }
    });
</script>

Within the widget itself, the onComplete method will be called immediately after the full initialization of the widget. I want the code within the widget to reference the object that the widget is linked to (in this case, the div with the id 'widHolder').

My goal is to be able to quickly and easily reference the holding object by creating the oncomplete function as listed above. The code in the widget itself will just be to call the onComplete function passing the holder (which I need to get) as a parameter.

Here is the code sample of the jQuery UI Widget plugin

(function ($) {
    $.widget("ui.widgetName", {
        options: {
            // ... other options that can be set
            onComplete: undefined
        },

        // called on the initialization of the widget
        _init: function () {
            // do initialization functions...

            if(this.options.onComplete)
                this.options.onComplete( I_WANT_TO_SEND_THE_DOM_ELEMENT_HERE );
        },
    }
})

Answer 1

The jQuery UI Widget Factory makes the element available via:

this.element from with the plugin.

For more information, please take a look here: http://wiki.jqueryui.com/w/page/12138135/Widget%20factory

Does that better answer your question?

(function ($) {
    $.widget("ui.widgetName", {
        options: {
            // ... other options that can be set
            onComplete: undefined
        },

        // called on the initialization of the widget
        _init: function () {
            // do initialization functions...

            if(this.options.onComplete)
                this.options.onComplete( this.element );
        },
    }
})

Side note - if you create another closure inside your plugin, you will need to save a reference to this. For instance:

(function ($) {
    $.widget("ui.widgetName", {
        options: {
            // ... other options that can be set
            onComplete: undefined
        },

        // called on the initialization of the widget
        _init: function () {
            // do initialization functions...
            var self = this;
            $.each(an_array_or_something_obj, function(){
                //here this will refer to the current element of the an_array_or_something_obj
                //self will refer to the jQuery UI widget
            });
            if(this.options.onComplete)
                this.options.onComplete( this.element );
        },
    }
})

Answer 2

Use this.offsetParent if, as in your example, the holder is the direct parent of the widget.