Расширение элемента DOM с помощью jQuery

Question

Я хотел бы расширить элемент DOM без расширения всех них. То есть, я бы хотел создать собственный класс со своими собственными методами и свойствами, но также иметь возможность рассматривать его как div. Например.

MyClass = function(){ 
    this.foo = "waaa"; 
} 
MyClass.prototype.changeText = function(newtext){ 
    // if this extended $(document.createElement("div")) something 
    // like this might be possible 
    this.html(newtext); 
} 
MyClass.prototype.alertFoo = function(){ 
    alert(this.foo); 
} 

var m = new MyClass(); 
$("body").append(m); 
m.changetext(); 

Возможно ли это?

Answer 1

Вы можете сделать свой класс класс ребенка в JQuery сгенерирована DIV элемент:

function MyClass(){ 
    this.foo = "waaa"; 
} 
MyClass.prototype = $('<div/>'); 
MyClass.prototype.changeText = function(newtext){ 
    this.html(newtext); 
} 
MyClass.prototype.alertFoo = function(){ 
    alert(this.foo); 
} 

var m = new MyClass(); 
$("body").append(m); 
m.changeText('appletree'); 

Answer 2

jQuery не сможет понять m, когда вы передаете его в строку добавления, поскольку он принимает только строки и элементы. У вашего MyClass, вероятно, будет специальный ключ для хранения самого элемента (например, this.el = document.createElement («div»);), но jQuery не сможет найти это самостоятельно.

Answer 3

Вы можете создать свой собственный объект, как и вы. Затем вы можете использовать jQuery's extend method для расширения элемента.

Answer 4

Проблема возникнет, когда вы захотите получить элемент позже. Может быть, вы можете просто хранить расширения как данные элемента, как, например:

var new_div = $('<div id="new_div" />'); 
new_div.data('m', new MyClass()); 

Тогда для вызова функций позже, вы могли бы сделать что-то вроде:

new_div.data('m').changetext(new_div) 

И передать DIV в качестве аргумента.

Answer 5

Вы также можете сделать это в качестве плагина:

jQuery.fn.myKindOfElement = function(msg) { 
    var foo = msg; // foo is basically a private member 
    this.alertFoo = function() { 
     alert(foo); 
    }; 
    this.setFoo = function(msg) { 
     foo = msg; 
    }; 
    this.changeText = function(text) { 
     // doesn't make sense because html already exists here 
     this.html(text); 
    }; 
}; 

Тогда для любого элемента:

var myKind = $('<div/>').myKindOfElement('bar'); 
$('body').append(myKind); 
myKind.alertFoo(); // alerts 'bar' 
myKind.changeText('blah'); // same as myKind.html('blah')