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

Call the method of an element selected with jquery

本文关键字：元素 方法 选择 jquery 调用      更新时间：2023-09-26

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

元素tabs[0].bubbles[0].element，方法.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();

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

我

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

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

返回 true（显然，这只发生在 bubble 是应该对应于 tabs[0].bubbles[0].element 的元素时）。

tabs[0].bubbles[0].element与$(bubble)[0]或$(bubble)[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>');

.expand()函数是这样创建的。

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');
}

我现在可以按照您的期望调用该方法

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

这在调用该方法时就足够了。似乎应该有一种更直接的方法。我不明白为什么jQuery需要参与，除了在事件回调函数中选择气泡。有什么想法吗？

我尝试在定义字符串时从字符串周围删除 $（.element（并在定义.expand()方法时取出.get(0)），但后来无论我尝试哪种方式，我都无法调用该方法。

问题在于元素的创建方式。

我现在创建这样的元素：

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

http://jsfiddle.net/eQLHT/

相关文章：