Extendiendo un elemento DOM con jQuery

Question

Me gustaría extender un elemento DOM sin extender todos ellos. Es decir, me gustaría una clase personalizada con sus propios métodos y propiedades, pero también poder tratarla como un div. P.ej.

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

¿Esto es posible?

Answer 1

Usted puede hacer su clase de una clase hija de la jQuery generada DIV elemento:

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 no podrá entender m cuando lo pase a la línea de anexión, ya que solo acepta cadenas y elementos. Su MyClass probablemente tendrá una clave específica para contener el elemento en sí (por ejemplo, this.el = document.createElement ("div");), pero jQuery no podrá encontrarlo por sí mismo.

Answer 3

Podrías hacer tu propio objeto, como lo estás haciendo. Luego puede usar jQuery's extend method para extender el elemento.

Answer 4

El problema vendrá cuando desee recuperar el elemento más adelante. Tal vez lo que puede almacenar las extensiones como datos del elemento, como por ejemplo:

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

A continuación, llamar a las funciones más tarde, se haría algo como:

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

y pasar el div como un argumento.

Answer 5

También puede hacerlo como un plugin:

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

Entonces, para cualquier elemento:

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