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') );

是等价的，它们只是两种不同的方式来写同样的东西。

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

2 个答案: