爲什麼下面的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

這是因爲它不是一個單一的根節點，但兩（ul和div）。

包裹一切在<div>，它會工作：

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

Answer 2

調用$(tmpl)創建一組的兩個元素 - <ul>元素和<div class="foo">元素。 .find()查找集合中與選擇器匹配的任何元素的派生元素。 .filter()返回集合中與選擇器匹配的所有元素。

前兩行：

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

是等價的，他們只是兩個寫同樣的事情不同的方式。