Perché non puoi chiamare outerHTML su $ (questo)?

Question

Quando si desidera ottenere il HTML di un intero elemento DOM (involucro incluso), è possibile effettuare le seguenti (come spiegato here):

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

Ma quello che non può fare è chiamata outerHTML su $(this) all'interno ad es un ambito funzione di clic ascoltatore o il selettore del corpo:

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

o

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

perché IntelliSense non mostrerà innerHTML o outerHTML in quelle circostanze, anche se con vaniglia JavaScript si può fare:

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

Quindi ... che succede?

Answer 1

outerHTML è una proprietà DOM; jQuery non espone tutte le proprietà del DOM.

Se si dispone di un oggetto jQuery, è possibile accedere direttamente solo alle proprietà e ai metodi esposti da jQuery e viceversa per gli oggetti DOM.

In termini orientati agli oggetti, gli oggetti jQuery non ereditano dagli oggetti DOM, ma li contengono.

Dicendo $x[0] si ottiene l'oggetto DOM per il primo elemento rappresentato da un oggetto jQuery.

Answer 2

È possibile utilizzare direttamente this per accedere outerHTML dell'oggetto corrente, invece di passare attraverso indirettamente $(this) in quanto questo rappresenta l'oggetto DOM (che ha outerHTML proprietà), mentre $(this) rappresenta oggetto jQuery.

this.outerHTML 

Answer 3

jQuery selector restituisce un oggetto jQuery array-like che non ha proprietà outerHTML.

Tuttavia, la matrice risultante di jQuery contiene elementi DOM.
Significa che puoi effettivamente accedervi in ​​questo modo.

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

Aggiornamento: funziona per me in tutti i browser.
È possibile accedere a oggetti jQuery array come in un gestore eventi click.

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

Ecco il mio JSFiddle: http://jsfiddle.net/13btf60p/

Aggiornamento 2:

OK, ora ho la tua domanda. Dovrebbe aver funzionato. Hai davvero bisogno di un IntelliSense per completare una costruzione così semplice e semplice?

Answer 4

Aggiungerò ciò che ho trovato essere la soluzione corretta a ciò che è risultato essere un difetto semplice nelle impostazioni predefinite di Visual Studio per riferimento futuro.

Dal momento che non volevo lasciare questo andare, ho cercato più e ha scoperto che, per impostazione predefinita, jQuery IntelliSense è un po 'deplorevole fuori dalla scatola in Visual Studio 2013.

Sotto

Strumenti> Opzioni> Editor di testo> JavaScript> IntelliSense> Riferimenti

ho impostato

Gruppo di riferimento: "Implicit (Web)"

e aggiunto un file jQuery esistente. Questo ha risolto tutti i problemi della mia domanda e IntelliSense ora suggerisce correttamente tutti i membri e i metodi, anche se questo avrebbe dovuto semplicemente funzionare fuori dalla scatola invece di costare a tutti un sacco di tempo.