selettore modulo non funziona lavorare sul markup dinamica

Question

Quando eseguo il seguente codice, si comporta come mi aspetto (registra il contenuto dell'elemento DIV):

var html = '<form action="/" method="get" name="myform"><div>123</div></form>'; 
console.log($('div', html)); 

Quello che non riesco a capire è il motivo per cui il seguente codice non funziona:

var html = '<form action="/" method="get" name="myform"><div>123</div></form>'; 
console.log($('form', html)); 

Essi sembrano lo stesso, quindi perché il lavoro di selezione DIV quando il selettore FORM non lo fa?

Answer 1

var html = '<form action="/" method="get" name="myform"><div>123</div></form>'; 
console.log($(html).html()); 

come la forma è l'elemento principale di html, $(html) saranno già restituite gli oggetti JQuery desiderato. Quindi, se provi a selezionare un tag modulo, Jquery prova a trovare un altro tag modulo all'interno del tuo modulo, che - ovviamente - non esiste.

Answer 2

Per il selettore, il secondo parametro deve essere un oggetto jQuery o DOM. Se fornisci una stringa, cercherà il contenuto della stringa. Per farlo funzionare, si dovrebbe fare la variabile html di essere un oggetto da:

var html = $('<form action="/" method="get" name="myform"><div>123</div></form>'); 
console.log($('div', html)); 

Poi, se si desidera, è possibile aggiungerlo alla tua pagina:

$('body').add(html); 

E 'anche una buona idea utilizzare un $ per le variabili oggetto jQuery:

var $html = $('<form action="/" method="get" name="myform"><div>123</div></form>'); 

Così si può facilmente sapere che questo è un oggetto jQuery già, e non si deve chiamare per es. $ (html) .show() ogni volta che vuoi fare qualcosa, puoi semplicemente chiamare $ html.show();

Answer 3

$('form', html) funziona come $(html).find('form'). .find() non guarda l'elemento originale, solo ai suoi figli, quindi non è possibile trovare form.

è possibile utilizzare alcuni workaround per esso, come questo:

var html = '<form action="/" method="get" name="myform"><div>123</div></form>'; 
console.log($('form', '<div>' + html + '</div>')); 

Fiddle.

Answer 4

Molto semplicemente, il secondo esempio non funziona perché non c'è nessun elemento di trovare nel contesto della della stringa, mentre nel primo esempio, non v'è un div che esiste all'interno del contesto della stringa .

In jQuery, il formato $('div', html) significa trovare l'elemento div nel contesto della variabile html. È equivalente a $(html).find('div'). Vedere http://api.jquery.com/jQuery/#expressioncontext

Selettore Contesto Per impostazione predefinita, selettori eseguono le loro ricerche all'interno del DOM a partire alla radice del documento. Tuttavia, è possibile fornire un contesto alternativo per la ricerca utilizzando il secondo parametro facoltativo alla funzione $(). Ad esempio, per fare una ricerca all'interno di un gestore di eventi, la ricerca può essere limitato in questo modo:

$("div.foo").click(function() { 
    $("span", this).addClass("bar"); 
}); 

Quando la ricerca per il selettore arco è limitato al contesto di questo, si estende solo all'interno del cliccato l'elemento riceverà la classe aggiuntiva.

Internamente, il contesto selettore è implementato con il metodo .find(), quindi $("span", this) equivale a $(this).find("span").

Dal momento che il secondo esempio non ha una forma all'interno contenuto della stringa (solo un div è all'interno di esso), non trova alcuna corrispondenza.