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

Mit Vanilla JavaScript ist das ganz einfach...

document.querySelector('#selector')

Answer 2

Eine gute .outerHTML()-Option finden Sie hier https://github.com/darlesson/jquery-outerhtml .

Im Gegensatz zu .html(), die nur den HTML-Inhalt des Elements zurückgibt, gibt diese Version von .outerHTML() das ausgewählte Element und seinen HTML-Inhalt zurück oder ersetzt es wie die Methode .replaceWith(), jedoch mit dem Unterschied, dass das ersetzende HTML durch die Verkettung vererbt werden kann.

Beispiele können auch in der obigen URL eingesehen werden.

Answer 3

Ich habe diesen einfachen Test mit outerHTML wird tokimon Lösung (ohne Klon), und outerHTML2 wird Jessica Lösung (Klon) gemacht

console.time("outerHTML");
for(i=0;i<1000;i++)
 {                 
  var html = $("<span style='padding:50px; margin:50px; display:block'><input type='text' title='test' /></span>").outerHTML();
 }                 
console.timeEnd("outerHTML");

console.time("outerHTML2");

 for(i=0;i<1000;i++)
 {                 
   var html = $("<span style='padding:50px; margin:50px; display:block'><input type='text' title='test' /></span>").outerHTML2();
  }                 
  console.timeEnd("outerHTML2");

und das Ergebnis in meinem Chromium (Version 20.0.1132.57 (0)) Browser war

outerHTML: 81ms
outerHTML2: 439ms

aber wenn wir die tokimon-Lösung ohne die native outerHTML-Funktion verwenden (die jetzt wahrscheinlich in fast jedem Browser unterstützt wird)

erhalten wir

outerHTML: 594ms
outerHTML2: 332ms

und es wird mehr Schleifen und Elemente in der realen Welt Beispiele, so dass die perfekte Kombination wäre

$.fn.outerHTML = function() 
{
  $t = $(this);
  if( "outerHTML" in $t[0] ) return $t[0].outerHTML; 
  else return $t.clone().wrap('<p>').parent().html(); 
}

Die Klon-Methode ist also tatsächlich schneller als die Wrap/Unwrap-Methode.
(jquery 1.7.2)

Answer 4

Kurz und knapp.

[].reduce($('.x'), function(i,v) {return i+v.outerHTML}, '')

oder Ereignis süßer mit Hilfe von Pfeilfunktionen

[].reduce.call($('.x'), (i,v) => i+v.outerHTML, '')

oder ganz ohne jQuery

[].reduce.call(document.querySelectorAll('.x'), (i,v) => i+v.outerHTML, '')

oder, wenn Sie diesen Ansatz nicht mögen, überprüfen Sie, dass

$('.x').get().reduce((i,v) => i+v.outerHTML, '')

Answer 5

Eine andere ähnliche Lösung mit zusätzlichen remove() des temporären DOM-Objekts.