Trova un elemento in un oggetto jQuery creato da una stringa di HTML

Question

Mi piacerebbe poter creare un oggetto jQuery da una stringa di HTML e cercare direttamente all'interno.

Esempio:

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

Mi aspetterei che find trova in realtà l'elemento div.

Se vuoi sapere di più sul contesto della mia domanda, ho sviluppato un'applicazione Backbone e di rendere certe opinioni che ho cose del genere:

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) 
    @ 

Sto cercando un modo più elegante per raggiungere lo stesso risultato.

Grazie!

---

Grazie Matt, è molto chiaro. Mi sento stupido per non aver pensato a questa sottigliezza nei confronti dei discendenti e dei fratelli.

Così ho refactoring il mio codice:

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) 
    @ 

ora c'è solo un inserimento DOM e il codice è più chiaro per me.

Answer 1

Questo perché find() ricerche discendenti degli elementi dell'oggetto jQuery, ma l'elemento .groups è un elemento nell'oggetto jQuery quindi non sarà abbinato.

Invece, è necessario utilizzare filter() per cercare gli elementi correnti.

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

Tuttavia se poi avuto la htmlString di <h3><span class="bar">Foo</span></h3><div class="groups"></div>, non troverebbero .bar; questa sarebbe una chiamata find().

Quindi è necessario controllare entrambi;

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