从小部件内部获取包含jquery小部件的div对象

Question

我有以下代码：

<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>

在小部件本身中，onComplete方法将在小部件完全初始化后立即调用。我希望小部件中的代码引用小部件链接到的对象（在本例中，id为"widHolder"的div）。

我的目标是通过创建上面列出的oncomplete函数，能够快速方便地引用持有对象。小部件本身的代码只是调用onComplete函数，将holder（我需要获得）作为参数传递。

以下是jQueryUIWidget插件的代码示例

(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

jQuery UI Widget Factory通过以下方式提供元素：

来自的带有插件的this.element。

有关更多信息，请查看此处：http://wiki.jqueryui.com/w/page/12138135/Widget%20factory

这能更好地回答你的问题吗？

(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 );
        },
    }
})

附带说明-如果您在插件中创建另一个闭包，则需要保存对this的引用。例如：

(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

如果与您的示例一样，持有者是小部件的直接父级，则使用this.offsetParent。