我遇到了一个我今天无法解释的一个反应,而今天与一些非常基本的
Jquery一起工作,我希望你们中的一个可以向我解释导致这些结果的是什么
所以我有一个DOM模型(在这里简化)
<div class="ObjectContainer"> <div class="Object"> <div>stuff</div> <div class="Object"> <div>stuff</div>
$('div.ObjectContainer').find('div.Object :last').attr("index","1");
我现在明白,这里的代码是不正确的,正确的查找选择器应该是’div.Object:last’,但这是我不明白的结果.当我执行第一个代码发生时:
<div class="ObjectContainer"> <div class="Object"> <div index="1">stuff</div> <div class="Object"> <div>stuff</div>
有人可以向我解释我的初始选择器如何设法在子节点上设置属性?
解决方法
空格表示与后代的匹配.对于每个空间,您都会降级(至少)一级,并将选择器应用于先前选择的元素的子项.
例如:
div.container.post
将匹配< div>与容器和帖子类,同时如下:
div.container .post
…将匹配任何元素与从< div>与一类容器.
这将匹配< div class =“container”>< p class =“post”>< / p>< / div>,但它也将匹配任何.post,:
<div class="container"> <div> <div> <a class="post"> <!-- matched --> </div> </div> </div>
您可以将其视为匹配阶段:找到匹配div.container的第一个元素,然后将这些元素(及其所有子元素)中的每一个与.post搜索匹配.
在你的情况下,div.Object:last first find all< div>标签与Object类,然后搜索每一个元素匹配:最后,这是任何元素,它是其容器中的最后一个元素.这适用于< div index =“1”> stuff< / div>和< div>东西< / div> ;. 空间的工作方式与链接多个调用相同,因此如果您了解其工作原理,您可以了解空格如何影响选择器.这些是相同的:
$('div#post ul.tags li'); $('div#post').find('ul.tags').find('li');