Perché il seguente selettore jQuery non restituisce entrambi gli elementi?

Question

Ho incontrato una situazione in cui sto creando un oggetto jQuery da una stringa html e ho bisogno di selezionare tutti gli elementi al suo interno con una particolare classe.

Quello che trovo strano è che il suo ritorno uno o l'altro, a seconda del tipo di meccanismo di selezione che sto usando. Un test è mostrato qui:

var tmpl = '<ul><li class="foo">TEST</li></ul><div class="foo">BAR</div>'; 

console.log($('.foo', tmpl)); //[<li class="foo">TEST</li>] 
console.log($(tmpl).find('.foo')); //[<li class="foo">TEST</li>] 
console.log($(tmpl).filter('.foo')); //[<div class="foo">BAR</div>] 

http://jsfiddle.net/Rfq9F/

In questo esempio, sia l'elemento li in ul e un div non hanno discendente classe "foo". Nell'esempio, utilizzo il selettore .foo e imposta il contesto sulla stringa del modello. Secondo, uso .find() sulla stringa. Infine, uso .filter() sulla stringa.

Qualcuno può spiegare perché i meccanismi di selezione agiscono come loro, e anche come raggiungere l'obiettivo che ho menzionato all'inizio?

Answer 1

È perché non è un singolo nodo principale, ma due (ul e div).

Avvolgere il tutto in un <div> e funzionerà:

http://jsfiddle.net/Rfq9F/3/

Answer 2

Calling $(tmpl) crea un set con due elementi - l'elemento <ul> e l'elemento <div class="foo">. .find() cerca elementi discendenti di uno qualsiasi degli elementi nel set che corrispondono al selettore. .filter() restituisce tutti gli elementi nel set che corrispondono al selettore.

Le prime due righe:

console.log($('.foo', tmpl)); 
console.log($(tmpl).find('.foo')); 

sono equivalenti, sono solo due modi diversi di scrivere la stessa cosa.