jQuery过滤方法混淆

Question

我正在尝试使用过滤器方法过滤jQuery对象但是没有得到我期望的结果。这是我的代码：

var $contents = $(".container");
var $spans = $contents.filter("span");

根据我对jQuery filter method的理解，这应该等同于以下内容：

var $spans = $(".container span");

但是，第一个示例没有将结果返回到$ spans变量，而第二个示例执行我期望的结果。

有人可以解释为什么第一个例子没有返回容器中所有span元素的集合吗？

这是一个说明问题的jsfidle：http://jsfiddle.net/w8Sf7/

Answer 1

过滤器 - 用于过滤掉您的结果

var $spans = $contents.filter("span"); // <-- filters out the span that are inside $contents collection

因此，过滤器正在查找您的$(".container");跨度元素

您的过滤器等于

var $spans = $("span.container");

其他的

var $spans = $(".container span.container"); // <-- gets descendant spans inside .container

因此，这会返回span

的任何后代$(".container");元素

所以

var $spans = $(".container span") 

等于

var $spans = $(".container").find('span');

等于

var $spans = $('span',".container");

Answer 2

那是因为你正在创建一个包含div标签的jQuery对象，因为集合中没有选择的span元素，length是0。

您想要的是find或children方法。

Answer 3

这些是等价的：

$contents.filter("span")
$("span.container");

因为两者都会找到span个container类的元素。

然后，这些是等价的：

$contents.find("span");
$(".container span")

因为两者都会找到包含在类span的元素中的container。

Answer 4

.filter()查看所选的元素。不是它的后代。如果您想选择<div class="container">的后代，您可以通过多种方式进行选择。以下是find()的使用方法。但这可能不是最有效的方式。

var $contents = $(".container");
$contents.find("*").filter("span");

这些可能更有效。

$(".container span")
$contents.find("span")

如果您想要孩子，那么您可以使用以下内容。

$contents.children("span")

还有$(descendantsOfElement, element)选择器。但是我认为在对代码进行故障排除时很难阅读，所以我很少（如果有的话）使用它。