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

Beachten Sie, dass die Lösung von Josh nur für ein einzelnes Element funktioniert.

Sicherlich ist "äußeres" HTML nur dann sinnvoll, wenn es sich um ein einzelnes Element handelt, aber es gibt Situationen, in denen es sinnvoll ist, eine Liste von HTML-Elementen zu nehmen und sie in Markup zu verwandeln.

In Erweiterung von Joshs Lösung werden hier mehrere Elemente behandelt:

(function($) {
  $.fn.outerHTML = function() {
    var $this = $(this);
    if ($this.length>1)
      return $.map($this, function(el){ return $(el).outerHTML(); }).join('');
    return $this.clone().wrap('<div/>').parent().html();
  }
})(jQuery);

Edit: ein weiteres Problem mit Joshs Lösung behoben, siehe Kommentar oben.

Answer 2

Hier ist ein sehr optimiertes outerHTML Plugin für jquery: ( http://jsperf.com/outerhtml-vs-jquery-clone-hack/5 \=> die 2 anderen schnellen Codeschnipsel sind mit einigen Browsern wie FF < 11 nicht kompatibel)

(function($) {

  var DIV = document.createElement("div"),
      outerHTML;

  if ('outerHTML' in DIV) {
    outerHTML = function(node) {
      return node.outerHTML;
    };
  } else {
    outerHTML = function(node) {
      var div = DIV.cloneNode();
      div.appendChild(node.cloneNode(true));
      return div.innerHTML;
    };
  }

  $.fn.outerHTML = function() {
    return this.length ? outerHTML(this[0]) : void(0);
  };

})(jQuery);

@Andy E => Ich stimme nicht mit Ihnen überein. outerHMTL braucht keinen Getter UND einen Setter: jQuery gibt uns bereits 'replaceWith'...

@mindplay => Warum verbinden Sie alle outerHTML? jquery.html gibt nur den HTML-Inhalt des ERSTEN Elements zurück.

(Sorry, ich habe nicht genug Ansehen, um Kommentare zu schreiben)

Answer 3

$.html = el => $("<div>"+el+"</div>").html().trim();

Answer 4

Reines JavaScript:

var outerHTML = function(node) {
  var div = document.createElement("div");
  div.appendChild(node.cloneNode(true));
  return div.innerHTML;
};

Answer 5

Dies ist ideal für das Ändern von Elementen auf dem Dom, aber nicht für dh bei der Übergabe in einem HTML-String in Jquery wie diese Arbeit:

$('<div id="foo">Some <span id="blog">content</span></div>').find('#blog').outerHTML();

Nach einigen Manipulationen habe ich eine Funktion erstellt, die es ermöglicht, die obige Funktion in IE für HTML-Strings zu verwenden:

$.fn.htmlStringOuterHTML = function() {     
    this.parent().find(this).wrap('<div/>');        
    return this.parent().html();
};