jQuery ottiene l'immagine HTML come stringa

Question

Come ottengo l'html di un'immagine con jQuery?

voglio che questo come l'uscita:

<img src="pokerface.png" alt="pokerface" /> 

che sto cercando con questo, ma sto diventando una stringa vuota (o nullo):

var imageHtml = $("#user-dialog .product-item img").html(); 

Il seguente restituisce il oggetto, ma voglio il codice html

var imageHtml = $("#user-dialog .product-item img") 

Come posso fare?

Se provo con

var imageHtml = $("#user-dialog .product-item img").attr("src"); 

ho la corretta origine dell'immagine (pokerface.png), quindi so che è l'elemento corretto.

Answer 1

Se l'immagine è l'unico elemento all'interno del contenitore che si potrebbe fare questo:

$("#user-dialog .product-item img").parent().html(); 

altrimenti si può creare un elemento fittizio e aggiungere l'oggetto img ad essa per ottenere il .html() valore.

$('<div>').append($("#user-dialog .product-item img").clone()).html(); 

La soluzione è qui proposto
How do you convert a jQuery object into a string?

Answer 2

jQuery("#user-dialog .product-item img").get(0).outerHTML; 

Answer 3

Stai cercando il modo efficace outerHTML (in quei browser che lo supportano):

var imageHtml = $("#user-dialog .product-item img").map(function(){ 
     return this.outerHTML; 
    }).get(); 

JS Fiddle demo.

Ciò ovviamente restituirà un array del codice HTML dell'elemento img; che permette jQuery per fascicolare tutte le informazioni rilevanti, piuttosto che in modo esplicito l'iterazione attraverso il set abbinato con get() o utilizzando gli indici staffa-notazione [n]

e un semplice (sul serio, è molto semplice) plugin per recuperare il outerHTML degli elementi trovati:

(function ($) { 
    $.fn.htmlOuter = function() { 
     var self = this, 
      len = self.length, 
      _tmp = document.createElement('div'), 
      _h = []; 
     for (var i = 0; i < len; i++) { 
      _tmp.appendChild(self[i].cloneNode()); 
      _h.push(_tmp.innerHTML); 
      _tmp.innerHTML = ''; 
     } 

     return _h; 
    }; 
})(jQuery); 

var images = $('img').htmlOuter(); 
console.log(images); 

JS Fiddle demo.

Si noti che quanto sopra restituisce un array, mentre, di solito, getter jQuery restituiscono risultati da solo il primo elemento di un unico set , se è questo che si preferisce allora si potrebbe alterare la linea finale del plugin per :

return _h[0]; 

JS Fiddle demo.

Oh, e ovviamente (come .text() e altri metodi getter) questo explitly non possono essere incatenato, dato che restituisce un array o una stringa (se preferito), non l'oggetto jQuery.

Riferimenti:

• jQuery:
  • get().
  • map().
• 'Plain' JavaScript:
  • Array.push().
  • document.createElement().
  • Node.appendChild().
  • Node.cloneNode().
  • outerHTML.
  • outerHTML compatibility.