从小部件内部获取包含 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 函数，将持有者（我需要获取）作为参数传递。

这里是 jQuery UI Widget 插件的代码示例

(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，如在您的示例中，持有者是小部件的直接父级。