Erweitern eines DOM-Elements mit jQuery

Question

Ich möchte ein DOM-Element erweitern, ohne sie alle zu erweitern. Das heißt, ich möchte eine benutzerdefinierte Klasse mit eigenen Methoden und Eigenschaften, aber auch in der Lage sein, sie als div zu behandeln. Z.B.

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

Ist das möglich?

Answer 1

Sie können Ihre Klasse ein Kind Klasse des jquery erzeugt DIV-Element machen:

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 kann m nicht verstehen, wenn Sie es an die Append-Zeile übergeben, da es nur Zeichenfolgen und Elemente akzeptiert. Ihre MyClass wird wahrscheinlich einen bestimmten Schlüssel haben, der das Element selbst enthält (z. B. this.el = document.createElement ("div");), aber jQuery kann das nicht selbst finden.

Answer 3

Sie könnten Ihr eigenes Objekt erstellen, so wie Sie es tun. Dann können Sie jQuerys extend method verwenden, um das Element zu erweitern.

Answer 4

Das Problem tritt auf, wenn Sie das Element später abrufen möchten. Vielleicht können Sie speichern nur die Erweiterungen wie Daten des Elements wie solche:

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

Dann später die Funktionen aufrufen, würden Sie so etwas wie:

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

Und das div als Argument übergeben.

Answer 5

Sie können auch tun es als 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); 
    }; 
}; 

Dann gilt für jedes Element:

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