13

Wenn Sie die HTML eines gesamten DOM-Element (Wrapper eingeschlossen) erhalten möchten, können Sie die folgenden Aktionen (wie here erklärt):

$('#myElementId')[0].outerHTML 

Aber was Sie nicht tun Anruf kann outerHTML auf $(this) innerhalb zB ein Klick Hörer oder Auswahlfunktion Körperbereich:

$(this).outerHTML //Doesn't complete in IntelliSense, returns undefined in browser 

oder

$(this)[0].outerHTML //Correction, this DOES work, but it doesn't complete in IntelliSense 

weil IntelliSense wird innerHTML oder outerHTML unter diesen Umständen nicht zeigen, wenn auch mit Vanille JavaScript können Sie tun:

document.getElementById($(this).attr('id')).outerHTML 

Also ... was ist los?

+5

Haben Sie tatsächlich im Browser selbst versucht? Ich sehe nicht besonders den Sinn, "OuterHTML" so zu verwenden, aber das sollte funktionieren. –

+3

Vielleicht kann Intellisense nicht feststellen, dass '$ (this) [0]' ein DOM-Element ist, also schlägt es keine DOM-Mitglieder vor. –

+0

Lehnend auf @ FrédéricHamidi's Erklärung. Erhalten Sie irgendwelche Intellisense auf '$ (this) .get (0) .outerHTML'? –

Antwort

22

outerHTML ist eine DOM-Eigenschaft; jQuery stellt nicht alle DOM-Eigenschaften zur Verfügung.

Wenn Sie ein jQuery-Objekt haben, können Sie nur direkt auf die Eigenschaften und Methoden zugreifen, die jQuery darstellt, und umgekehrt für DOM-Objekte.

In objektorientierten Begriffen erben jQuery-Objekte nicht von DOM-Objekten, sie enthalten sie.

Mit dem Aufruf $x[0] erhalten Sie das DOM-Objekt für das erste Element, das durch ein jQuery-Objekt repräsentiert wird.

+3

Der Fragesteller sagt, dass Intellisense "$ (this) [0] .outerHTML" nicht vervollständigen kann, es ist also nicht nur ein Problem mit dem jQuery-Objekt/DOM-Element. –

+5

@ FrédéricHamidi: Ich denke, Intellisense ist nicht schlau genug, um zu bestimmen, dass der Array-Zugriffsmechanismus '[]' eines jQuery-Objekts ein DOM-Element zurückgibt. – RichieHindle

+0

@ FrédéricHamidi tut es tatsächlich * nicht * vervollständigt '$ (this) [0] .outerHTML', obwohl es im Browser funktioniert. –

19

können Sie direkt indirekt durchlaufen statt $(this) verwenden thisouterHTML des aktuellen Objekts zugreifen, da dies das Objekt DOM darstellt (die outerHTML Eigenschaft hat), während $(this) Objekt jQuery darstellt.

4

Der jQuery-Selektor gibt ein Array-ähnliches jQuery-Objekt zurück, das keine OuterHTML-Eigenschaft besitzt.

Das resultierende jQuery-Array enthält jedoch DOM-Elemente.
Es bedeutet, dass Sie tatsächlich auf diese Weise zugreifen können.

$(".someClass")[0].outerHTML // it works for me 

Update: Es funktioniert für mich in jedem Browser.
Ich kann Array-ähnliche jQuery-Objekt auch in einem Click-Ereignishandler zugreifen.

$(".someClass").click(function() 
{ 
    alert($(this)[0].outerHTML); // it works me too 
}); 

Hier mein JSFiddle ist: http://jsfiddle.net/13btf60p/

Update 2:

OK, jetzt bekomme ich Ihre Frage. Es hätte funktionieren müssen. Benötigen Sie wirklich eine IntelliSense, um solch eine einfache und einfache Konstruktion zu vervollständigen?

+5

Die OP behauptet, dass '$ (this) [0] .outerHTML' auch nicht richtig funktioniert. Die Tatsache, dass jQuery ein Array-ähnliches Objekt zurückgibt, ist irrelevant. –

+0

@ Qantas94Heavy Es funktioniert richtig für mich in verschiedenen Browsern. Ich kann auf '$ (this) [0] .outerHTML' auf Click-Ereignis zugreifen. –

+2

@ YeldarKurmangaliyev, aber die Frage unterscheidet sich. – Jai

1

Ich füge hinzu, was ich gefunden habe, um die richtige Lösung zu sein, was ein einfacher Fehler in den Standard-Visual Studio-Einstellungen für zukünftige Referenz wurde.

Da ich das nicht gehen lassen wollte, suchte ich weiter und fand heraus, dass standardmäßig, jQuery IntelliSense aus der Box in Visual Studio 2013

Unter

etwas bedauerlich ist

Extras> Optionen> Texteditor> Javascript> IntelliSense> Referenzen

ich habe

Referenzgruppe: "Implizit (Web)"

und eine vorhandene jQuery-Datei hinzugefügt. Dies löste alle Probleme meiner Frage und IntelliSense schlägt nun alle Mitglieder und Methoden korrekt vor, obwohl dies einfach aus der Box heraus funktionieren sollte, anstatt jeden einen Haufen Zeit zu kosten.

Verwandte Themen