次のjQueryセレクターが両方の要素を返さないのはなぜですか？

Question

私は、html文字列からjQueryオブジェクトを作成していて、特定のクラスでその中のすべての要素を選択する必要がある状況に遭遇しました。

私が奇妙なことは、私が使用している選択メカニズムのタイプに応じて、どちらかが返ってくることです。テストケースがここに示されている：この例では

var tmpl = '<ul><li class="foo">TEST</li></ul><div class="foo">BAR</div>'; 

console.log($('.foo', tmpl)); //[<li class="foo">TEST</li>] 
console.log($(tmpl).find('.foo')); //[<li class="foo">TEST</li>] 
console.log($(tmpl).filter('.foo')); //[<div class="foo">BAR</div>] 

http://jsfiddle.net/Rfq9F/

、ULでli要素と非子孫DIVの両方がクラス「foo」を持っています。この例では、.fooセレクタを使用してコンテキストをテンプレート文字列に設定します。次に、文字列に.find（）を使用します。最後に、文字列に.filter（）を使用します。

セレクタメカニズムが動作している理由と、最初に述べた目標を達成する方法について説明できますか？

Answer 1

これはルートノードが1つではなく、2つ（ulとdiv）のためです。

<div>でのラップすべてと、それは動作します： - <ul>要素と<div class="foo">要素

http://jsfiddle.net/Rfq9F/3/

Answer 2

$(tmpl)を呼び出すには、2つの要素を持つセットを作成します。 .find()は、セレクタに一致するセットのいずれかの要素の子孫である要素を探します。 .filter()は、セレクタに一致するセット内の要素を返します。

最初の2行は：

console.log($('.foo', tmpl)); 
console.log($(tmpl).find('.foo')); 

は、彼らが同じことを書くためのちょうど2つの異なった方法だ、と同等です。