jquery选择器中的空格是什么意思?
我今天遇到了一个我无法解释的反应,今天和一些非常基本的Jquery一起工作,我希望你们中的一个能够向我解释导致这些结果的原因是什么
所以我有一个DOM模型(在这里简化)
stuff stuff
我们的想法是使用以下代码在最后一个Object上设置一个属性:
$('div.ObjectContainer').find('div.Object :last').attr("index", "1");
我现在明白这里的代码是不正确的,正确的查找选择器应该是’div.Object:last’,但这是我不明白的结果。 当我执行第一个代码时发生了这种情况:
stuff stuff
有人可以向我解释我的初始选择器是如何设法在子节点上设置属性的吗?
空格表示与后代匹配。 对于每个空间,您将下降(至少)一个级别并将选择器应用于先前所选元素的子级。
例如:
div.container.post
将
与container
匹配并 post
类,而以下内容:
div.container .post
…将匹配任何元素与具有container
类的
下降的类post
。
这将匹配
,但它也将匹配任何.post
,无论它的嵌套程度如何:
您可以将其视为分阶段匹配:找到匹配div.container
第一个元素,然后搜索每个元素(及其所有子元素)与.post
匹配。
在您的情况下, div.Object :last
首先使用Object
类查找所有
标记,然后在每个标记中搜索匹配的元素:last
,即任何元素,它是其容器中的最后一个元素。 这适用于
stuff
和
stuff
。
空格的工作方式与链接多个find
调用的方式完全相同,因此如果您了解其工作方式,则可以了解空间如何影响选择器。 这些是相同的:
$('div#post ul.tags li'); $('div#post').find('ul.tags').find('li');
$('div.ObjectContainer').find('div.Object :last')
会产生通配符效果。 它会查找psudo类为last的任何孩子:last。 因此它只选择了div:last。 它相当于$('div.ObjectContainer').find('div.Object div:last')
使用jQuery,你可以通过提供它的ID,类名,标签类型等找到任何DOM obj,或者先找到父对象然后指定你想要的嵌套子对象
例如,你可以找到第一个Div。 此查询的对象
$('.ObjectContainer .Object:first')
所以jQuery选择器中的空格将父节点和它的子节点分开