从 jQuery 小部件内的 .each() 方法中访问该小部件的 public/private 方法

Question

我正在尝试扩展 jQuery 中的选项卡小部件，以便它在创建新选项卡（由用户触发）或在页面上时自动将某些 html 添加到选项卡加载（对于任何预先存在的选项卡）。通过使用常规选项卡小部件和一堆自定义 javascript 函数，我能够让所有这些在小部件外部工作。但是，为了使其更加模块化，我希望这些函数成为我的扩展小部件的成员函数。

小部件：

$.widget( "custom.extendedTabs", $.ui.tabs, {
    ,_addOptions: function($el) {
        //add a "close" button and an "options" button on each tab on mouseover
    }   
    ,_create: function() {
        this.element.find("li").each(function(i,el){
            this._addOptions($(this));
        });
        return this._super();
    }
    ,addTab: function() {
        //handle tab creation
        ........
        this._addOptions(<newlyCreatedliElement>);
    }
});

实例化：

$(".tabs").each(function(){
    $(this).extendedTabs();
});

样本：

<div id="tabs1" class="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus.</p>
  </div>
  <div id="tabs-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus.</p>
  </div>
</div>

<div id="tabs2" class="tabs">
  <ul>
    <li><a href="#tabs-3">Nunc tincidunt</a></li>
  </ul>
  <div id="tabs-3">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus.</p>
  </div>
</div>

问题：

根据测试，我可以直接从 _create() 调用 this._addOptions() 没有问题。但是，从 _create() 内部的 .each() 调用它时，我没有获得同样的成功。尝试这样做时，我收到 this.addOptions is not a function 作为错误。

我知道 .each() 内部的 this 表示迭代实例元素本身，而不是调用它的父小部件。但我认为可能有一些方法可以引用调用 .each().

的对象

更新：

我成功地用以下内容替换了 .each()：

for (var el in this.element.find("li").toArray()) {
    this._addOptions($(this.element.find("li").toArray()[el]));
}

然而，它感觉笨拙，所以我仍然希望有人提供一些更简洁的方法。

Answer 1

我考虑过另一种解决方案 -- 保留 jQuery .each():

,_create: function() {
    var self=this;
    this.element.find("li").each(function(i,el){
        self._addOptions($(this));
    });
    return this._super();
}

从 jQuery 小部件内的 .each() 方法中访问该小部件的 public/private 方法

Accessing public/private methods of a jQuery widget from within an .each() method inside that widget

each

jquery

scope

widget