Вызвать метод элемента, выбранного с помощью jquery

Question

У меня есть элемент, который имеет определяемый пользователем метод. Элемент создается как часть более крупного объекта и вставлен в загрузку документа. Я могу вызвать этот метод в любой точке, если я сделаю это, обратившись непосредственно к элементу из объекта.

Элемент является 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]) 

возвращает истинное (очевидно, это происходит только, когда bubble является элементом, который должен соответствовать tabs[0].bubbles[0].element).

tabs[0].bubbles[0].element не то же самое, что $(bubble)[0] или $(bubble)[0].

Как я могу вызвать метод из функции, в которой он был выбран с помощью JQuery?

EDIT

Я думаю, что проблема заключается в том, как создать объект. Поле элемента объекта создается в методе конструктора, подобном этому.

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.expand(); делать ничего.

Однако, если определить метод, как это:

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

теперь я могу вызвать метод, как можно было бы ожидать

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

Это достаточно как метод. Кажется, должен быть более простой способ сделать это. Я не понимаю, почему нужно задействовать jQuery, кроме выбора пузыря в функции обратного вызова события. Есть предположения?

Я попытался удалить $() от около строки, когда .element в настоящее время определяется (а также вынимая .get(0), когда метод .expand() определен), но тогда я не мог вызвать метод вообще по независимо от того, каким образом я пытался ,

Answer 1

Проблема была в том, как был создан элемент.

я теперь создать элемент вроде этого:

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

Это все кажется работать. Спасибо всем за помощь.

Answer 2

Если вы хотите вызвать метод для каждого элемента согласованного набора и/или получить значение последнего совпадения, вы можете создать новую функцию 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/