Znajdź element w obiekcie jQuery zbudowanym z ciągu znaków HTML

Question

Chciałbym móc zbudować obiekt jQuery z ciągu znaków HTML i bezpośrednio przeszukać.

przykład:

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

by się spodziewać, że find rzeczywiście stwierdza element div.

Jeśli chcesz wiedzieć więcej o kontekście moje pytanie, mam opracować aplikację Backbone oraz świadczenie niektórych widokach mam takie rzeczy:

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

szukam bardziej elegancki sposób osiągnąć ten sam rezultat.

Dzięki!

---

Dzięki Matt, jest bardzo jasne. Czuję się głupio, nie myśląc o tej subtelności o potomku i rodzeństwie.

Więc refactored mojego kodu:

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

teraz jest tylko jeden DOM wstawiania i kod wygląda jaśniej mi.

Answer 1

To dlatego find() przeszukuje potomków elementów w obiekcie jQuery, ale element .groupsjest elementem w obiekcie jQuery więc nie będą dopasowane.

Zamiast tego należy użyć filter(), aby wyszukać bieżące elementy.

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

Jeśli jednak wtedy miał htmlString z <h3><span class="bar">Foo</span></h3><div class="groups"></div>, nie znalazłby .bar; byłoby to wywołanie find().

Musisz więc sprawdzić oba;

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