Holt das äußere HTML des ausgewählten Elements

Question

Ich versuche, die HTML eines ausgewählten Objekts mit jQuery zu erhalten. Ich bin mir bewusst, dass die .html() Funktion; das Problem ist, dass ich das HTML einschließlich des ausgewählten Objekts benötige (in diesem Fall eine Tabellenzeile, in der .html() gibt nur die Zellen innerhalb der Zeile zurück).

Ich habe herum gesucht und fand ein paar sehr "hackish" Art Methoden der Klonen eines Objekts, fügen Sie es zu einem neu erstellten div, etc, etc, aber dies scheint wirklich schmutzig. Gibt es einen besseren Weg, oder bietet die neue Version von jQuery (1.4.2) irgendeine Art von outerHtml Funktionalität?

Answer 1

Ich habe Jessicas Lösung (die von Josh bearbeitet wurde) verwendet, um outerHTML unter Firefox zum Laufen zu bringen. Das Problem war jedoch, dass mein Code nicht funktionierte, weil ihre Lösung das Element in ein DIV einschloss. Das Hinzufügen einer weiteren Codezeile löste das Problem.

Mit dem folgenden Code erhalten Sie das outerHTML, wobei der DOM-Baum unverändert bleibt.

$jq.fn.outerHTML = function() {
    if ($jq(this).attr('outerHTML'))
        return $jq(this).attr('outerHTML');
    else
    {
    var content = $jq(this).wrap('<div></div>').parent().html();
        $jq(this).unwrap();
        return content;
    }
}

Und verwenden Sie es wie folgt: $("#myDiv").outerHTML();

Ich hoffe, es ist für jemanden nützlich!

Answer 2

// no cloning necessary    
var x = $('#xxx').wrapAll('<div></div>').parent().html(); 
alert(x);

Hier fummeln: http://jsfiddle.net/ezmilhouse/Mv76a/

Answer 3

Wenn das Szenario eine neue Zeile dynamisch anfügt, können Sie dies verwenden:

var row = $(".myRow").last().clone();
$(".myRow").last().after(row);

.myrow ist der Klassenname des <tr> . Es wird eine Kopie der letzten Zeile erstellt und diese als neue letzte Zeile eingefügt. Dies funktioniert auch in IE7 , während die [0].outerHTML Methode erlaubt keine Zuweisungen in ie7

Answer 4

Node.cloneNode() scheint kaum ein Hack zu sein. Man kann den Knoten klonen und an ein beliebiges übergeordnetes Element anhängen und ihn auch manipulieren, indem man einzelne Eigenschaften manipuliert, anstatt z. B. reguläre Ausdrücke darauf anzuwenden oder ihn in das DOM einzufügen und ihn dann nachträglich zu manipulieren.

Sie könnten aber auch über die Attribute des Elements iterieren um eine HTML-String-Darstellung zu erstellen. Es scheint wahrscheinlich, dies ist, wie jede outerHTML Funktion implementiert werden würde, wenn jQuery eine hinzufügen.

Answer 5

Ich habe die von Jessica aktualisierte Lösung von Volomike verwendet. Ich habe nur eine Prüfung hinzugefügt, um zu sehen, ob das Element vorhanden ist, und ein Leerzeichen zurückgegeben, falls es nicht vorhanden ist.

jQuery.fn.outerHTML = function() {
return $(this).length > 0 ? $(this).clone().wrap('<div />').parent().html() : '';
};

Natürlich, verwenden Sie es wie:

$('table#buttons').outerHTML();