Encontrar un elemento en un objeto jQuery construido a partir de una cadena de HTML

Question

Me gustaría poder construir un objeto jQuery a partir de una cadena de HTML y buscar directamente dentro.

Ejemplo:

htmlString = '<h3>Foo</h3><div class="groups"></div>' 
$html  = $(htmlString) 
$groups = $html.find('.groups') // Returns []. WTF? 

Yo esperaría que find realidad se encuentra el elemento div.

Si usted quiere saber más acerca del contexto de mi pregunta, yo desarrollo una aplicación de red troncal y para poner ciertos puntos de vista que tienen cosas por el estilo:

render: -> 
    $html = $(@template(vehicle: @vehicle)) 
    $groups = $() 

    _(@groups).each (group)=> 
    subview = new App.Views.AttributesGroup(group: group, vehicle: @vehicle) 
    $groups = $groups.add(subview.render().el) 

    $(@el).html($html) 
    $(@el).find('.groups').replaceWith($groups) 
    @ 

estoy en busca de una forma más elegante de lograr el mismo resultado

Gracias!

---

Gracias Matt, está muy claro. Me siento estúpido por no haber pensado en esta sutileza sobre descendientes y hermanos.

Así que refactorizado mi código:

render: -> 
    $html = $(@template(vehicle: @vehicle)) 
    $groups = $html.filter('.groups') 

    _(@groups).each (group)=> 
    subview = new App.Views.AttributesGroup(group: group, vehicle: @vehicle) 
    $groups.append(subview.render().el) 

    $(@el).html($html) 
    @ 

Ahora sólo hay una inserción DOM y el código se ve más claro para mí.

Answer 1

Esto es porque find() busca en los descendientes de los elementos en el objeto jQuery, pero el elemento .groups es un elemento en el objeto jQuery por lo que no será igualado.

En su lugar, necesita usar filter() para buscar los elementos actuales.

htmlString = '<h3>Foo</h3><div class="groups"></div>' 
$html  = $(htmlString) 
$groups = $html.filter('.groups'); 

Sin embargo, si a continuación, tuvo la htmlString de <h3><span class="bar">Foo</span></h3><div class="groups"></div>, que no encontrará .bar; esto sería una llamada find().

Por lo tanto, deberá comprobar ambos;

htmlString = '<h3>Foo</h3><div class="groups"></div>' 
$html  = $(htmlString) 
$groups = $html.find('.groups').add($html.filter('.groups'));