Javascript 调用使用jquery选择的元素的方法

我有一个元素，它有一个用户定义的方法。元素作为较大对象的一部分创建，并在加载文档时插入。如果通过直接从对象中寻址元素，我可以在任何时候调用该方法

元素为

tabs[0]。气泡[0]。元素为
，方法为
。expand（）

（此对象中有多个元素，每个元素都有自己的.expand（）方法）

那么，线路呢

tabs[0].bubbles[0].element.expand();

调用该元素的方法。但是，当发生特定事件时，会调用一个函数，我可以从中选择如下元素：

bubble = $(this).parent(); // the bubble element is the event handlers parent

然而，这些线

bubble.expand();
// or 
$(bubble).expand();
// or
$(bubble)[0].expand();

不要调用该方法

线路

tabs[0].bubbles[0].element.expand();

确实调用了该方法。但是，我无法使用此行调用该方法，因为存在许多不同的元素，并且我无法从函数中找到数组元素的索引号

$.fn.invoke = function(name) {
    var args = Array.prototype.slice.call(arguments, 1);
    var ret;

    this.each(function() {
        ret = this[name].apply(this, args);
    });

    return typeof ret !== 'undefined' ? ret : this;
};

我想我可能没有选择正确的元素，但是

($(bubble)[0] === $(tabs[0].bubbles[0].element)[0])

返回true（显然，只有当
气泡
是应该对应于
选项卡[0]。气泡[0]。元素
的元素时，才会出现这种情况）

选项卡[0]。气泡[0]。元素
与
$（气泡）[0]
或
$（气泡）[0]
不同

如何在使用JQuery选择该方法的函数中调用该方法

编辑

我认为问题在于如何创建对象。对象的元素字段是在构造函数方法中创建的，如下所示

this.element = $('<div class="bubble ' + this.type + '">\
    <div class="bubbleCentre ' + this.state + ' "> \
        <img class="bubbleIcon" src="img/dash/' + this.icon + '"> \
        <span class="status">' + text + '</span> \
    </div> \
</div>');

this.element.expand = function ()
{
    // method
    alert('method executing');
}

我可以这样调用这个方法

tabs[0].bubbles[0].element.expand();

但是
bubble.get（0.expand（）
或
bubble.expand（）什么都不做

但是，如果我这样定义方法：

this.element.get(0).expand = function ()
{
    // method
    alert('method executing');
}

this.element = document.createElement('div');                                                               // first create DOM element

// append child elements
$(this.element).addClass('bubble ' + this.type);
$('<div class="bubbleCentre ' + this.state + ' "></div>').appendTo(this.element)                            // append centre
.append('<img class="bubbleIcon" src="img/dash/' + this.icon + '" title="' + type.capitalize()  + '">')     // append icon to centre
.append('<span class="status">' + text + '</span>')                                                         // append status to centre
.parent().append('<div class="subbubbles"><div style="position: relative;"></div></div>');                  // append subbubbles box

this.element.expand = function ()
{
    // method running
    alert('method running');
}

bubble.get(0).expand(); 

我现在可以像您所期望的那样调用该方法

bubble.get(0).expand(); // expands bubble as you would expect

在调用方法时，这就足够了。看起来确实应该有一种更直接的方法来做到这一点。除了在事件回调函数中选择气泡之外，我不明白为什么jQuery需要参与。有什么想法吗

当定义
.element
时，我尝试从字符串周围删除$（）（当定义
.expand（）
方法时，我也删除了
.get（0）
），但是无论我尝试了什么方法，我都无法调用该方法。
问题在于元素是如何创建的

我现在创建如下元素：

this.element.get(0).expand = function ()
{
    // method
    alert('method executing');
}

this.element = document.createElement('div');                                                               // first create DOM element

// append child elements
$(this.element).addClass('bubble ' + this.type);
$('<div class="bubbleCentre ' + this.state + ' "></div>').appendTo(this.element)                            // append centre
.append('<img class="bubbleIcon" src="img/dash/' + this.icon + '" title="' + type.capitalize()  + '">')     // append icon to centre
.append('<span class="status">' + text + '</span>')                                                         // append status to centre
.parent().append('<div class="subbubbles"><div style="position: relative;"></div></div>');                  // append subbubbles box

this.element.expand = function ()
{
    // method running
    alert('method running');
}

bubble.get(0).expand(); 

我这样调用该方法：

this.element.get(0).expand = function ()
{
    // method
    alert('method executing');
}

this.element = document.createElement('div');                                                               // first create DOM element

// append child elements
$(this.element).addClass('bubble ' + this.type);
$('<div class="bubbleCentre ' + this.state + ' "></div>').appendTo(this.element)                            // append centre
.append('<img class="bubbleIcon" src="img/dash/' + this.icon + '" title="' + type.capitalize()  + '">')     // append icon to centre
.append('<span class="status">' + text + '</span>')                                                         // append status to centre
.parent().append('<div class="subbubbles"><div style="position: relative;"></div></div>');                  // append subbubbles box

this.element.expand = function ()
{
    // method running
    alert('method running');
}

bubble.get(0).expand(); 

这一切似乎都奏效了。感谢大家的帮助。
如果要为匹配集的每个元素调用方法和/或获取上一个匹配的de值，可以创建一个新的jquery函数

$.fn.invoke = function(name) {
    var args = Array.prototype.slice.call(arguments, 1);
    var ret;

    this.each(function() {
        ret = this[name].apply(this, args);
    });

    return typeof ret !== 'undefined' ? ret : this;
};

同时
选项卡[0]。气泡[0]。元素。展开（）按预期调用方法，
$（制表符[0]。气泡[0]。元素）[0]。展开（）和
$（制表符[0]。气泡[0]。元素）。展开（）什么都不做。这向我表明，问题在于选择带有jquery的元素使用控制台来记录元素并查看它们是什么？console.log（item）…然后在控制台中查看，
bubble
和
tabs[0]。bubbles[0]。element
似乎都记录了相同的事情。这让我很沮丧，因为（bubble==制表符[0]。bubbles[0]。元素）返回false和
bubble.expand（）什么也不做。