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

は今だけ1 DOM挿入があり、コードは私に明確になります。

だから私は私のコードをリファクタリング。

Answer 1

これはfind()検索jQueryオブジェクト内の要素の子孫であるが、.groups要素はそれほど一致しないであろうjQueryオブジェクトに要素です。

代わりに、filter()を使用して現在の要素を検索する必要があります。あなたが<h3><span class="bar">Foo</span></h3><div class="groups"></div>のhtmlStringを持っていた場合

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

ただし、.barを見つけられないでしょう。これはfind()コールになります。

したがって、両方を確認する必要があります。

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