jquery - jQuery过滤方法混淆

Question

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

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

根据我对jQuery 过滤器方法的理解，这应该等同于以下内容：

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

但是，第一个示例没有将结果返回到 $spans 变量中，而第二个示例则符合我的预期。

谁能解释为什么第一个示例不返回容器中所有 span 元素的集合？

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

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

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

你想要的是find或children方法。

score 1 · Accepted Answer

这些是等价的：

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

因为两者都会找到属于spans 类的元素container。

那么，这些是等价的：

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

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

score 1 · Accepted Answer

.filter()查看被选中的元素。不在其子孙处。如果要选择后代，<div class="container">可以通过多种方式进行。以下是如何使用find(). 但这可能不是最有效的方法。

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

这些可能更有效。

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

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

$contents.children("span")

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

4 回答 4