为什么以下 jQuery 选择器不返回两个元素？答案

【问题标题】：Why is the following jQuery selector not returning both elements?为什么以下 jQuery 选择器不返回两个元素？
【发布时间】：2012-03-29 17:49:33
【问题描述】：

我遇到了一种情况，我从一个 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() 。

有人能解释一下为什么选择器机制会这样，以及如何实现我在开头提到的目标吗？

【问题讨论】：

标签： javascript jquery jquery-selectors

【解决方案1】：

调用$(tmpl) 会创建一个包含两个元素的集合——<ul> 元素和<div class="foo"> 元素。 .find() 查找作为集合中与选择器匹配的任何元素的后代的元素。 .filter() 返回集合中与选择器匹配的任何元素。

前两行：

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

是等价的，它们只是写同一件事的两种不同方式。

【讨论】：

【解决方案2】：

这是因为它不是一个根节点，而是两个（ul 和div）。

将所有内容包装在 <div> 中，它会起作用：

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

【讨论】：

有道理。感谢您的回答。