從一個HTML字符串構建的jQuery對象中查找一個元素

Question

我希望能夠從一個HTML字符串構建一個jQuery對象並直接在裏面搜索。

例子：

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

我預計find居然發現div元素。

如果你想知道更多關於我的問題的情況下，我開發一個應用骨幹，並呈現一定的意見我有這樣的事情：

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

我正在尋找一種更優雅的方式來達到相同的結果。

謝謝！

---

謝謝馬特，這很清楚。我沒有想到這個關於後代和兄弟姐妹的微妙之處，我感到很愚蠢。

所以我重構我的代碼：

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

現在只有一個DOM插入和代碼看起來更清晰的給我。

Answer 1

這是因爲find()搜索jQuery對象中的元素的後代，但.groups元件是 jQuery對象中的元件，從而將不被匹配。

相反，您需要使用filter()來搜索當前元素。

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

不過，如果你有那麼的<h3><span class="bar">Foo</span></h3><div class="groups"></div>的htmlString，你不會發現.bar;這將是一個find()電話。

所以你需要檢查兩者;

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