¿Por qué el siguiente selector jQuery no devuelve ambos elementos?

Question

Me encontré con una situación en la que estoy creando un objeto jQuery a partir de una cadena html y necesito seleccionar todos los elementos dentro de él con una clase particular.

Lo que me resulta extraño es que devuelva uno u otro, dependiendo del tipo de mecanismo de selección que estoy usando. Un caso de prueba se muestra aquí:

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/

En este ejemplo, tanto un elemento li en un ul y una div no descendiente tienen la clase "foo". En el ejemplo, uso el selector .foo y establezco el contexto en la cadena de la plantilla. En segundo lugar, uso .find() en la cadena. Finalmente, uso .filter() en la cadena.

¿Alguien puede explicar por qué los mecanismos del selector están actuando como lo hacen, y también cómo lograr el objetivo que mencioné al principio?

Answer 1

Es porque no es un nodo raíz único, sino dos (ul y div).

envolver todo en un <div> y funcionará:

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

Answer 2

Calling $(tmpl) crea un conjunto con dos elementos - el elemento <ul> y el elemento <div class="foo">. .find() busca elementos que sean descendientes de cualquiera de los elementos del conjunto que coincidan con el selector. .filter() devuelve cualquier elemento en el conjunto que coincida con el selector.

Las primeras dos líneas:

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

son equivalentes, son sólo dos formas diferentes de escribir la misma cosa.