为什么第n个孩子(1)适用于所有的孩子?
在此基础上非常基本的HTML结构:为什么第n个孩子(1)适用于所有的孩子?
<div>This is a cube</div>
<div>This is a triangle</div>
<div>This is a big, green circle</div>
我已经设置了以下的jQuery:
$(document).ready(function() {
$("div:nth-child(1)").addClass("cube-text text");
$("div:nth-child(2)").addClass("triangle-text text");
$("div:nth-child(3)").addClass("circle-text text");
$("div:nth-child(1)").wrap("<div class='cube shape'></div>");
$("div:nth-child(2)").wrap("<div class='triangle shape'></div>");
$("div:nth-child(3)").wrap("<div class='circle shape'></div>");
$(".shape").wrap("<div class='inner'></div>");
$(".inner").wrap("<div class='outer'></div>");
$(".outer").wrap("<div class='column'></div>");
$(".outer:nth-child(1)").addClass("cube-anim");
$(".outer:nth-child(2)").addClass("triangle-anim");
$(".outer:nth-child(3)").addClass("circle-anim");
});
出于某种原因,最后的三线似乎没有被发挥预期。他们应该将相应的类添加到在之前的行中创建的“.outer”div的连续实例中。我曾尝试使用各种替代这个特殊的语法,如...
div .outer:nth-child
.column .outer:nth-child
.column:nth-child
其他几人,在那种试错尝试得到想要的结果的。
我试图让每个“.outer” div容器拥有一个额外的类,将通过CSS3被要求来渲染一些基于@keyframe动画。
这里是的jsfiddle:http://jsfiddle.net/5NEPu/
每个.outer
是.column
的独子,因此:nth-child(1)
(它在功能equivalent to :first-child
)将匹配所有的人,而nth-child(2)
和(3)
永远不会匹配。
您需要为使用:eq()
:
// selects first .outer in the DOM, as :eq is 0-based
$(".outer:eq(0)").addClass("cube-anim");
在上层与兄弟姐妹
或者:nth-child()
:
// selects .outer descendant of a column that is a first child.
// NOTE:
// Only works properly if the columns are the only children of the same parent
$(".column:nth-child(1) .outer").addClass("cube-anim");
我的意思是“只能”在那,如果的第一个孩子列的父母不是列,那么所有列的子索引将被偏移1.正如你所看到的,在许多用例中,nth-child
是相当脆弱的。
使用.closest()
另一种可能的解决方案:
$('.triangle').closest('.outer').addClass("triangle-anim");
我明白了。这是我的(不正确的)理解,第n个孩子(n)将应用于文档树中第n个元素的出现。我现在明白,因为每个.outer是其父母的第一个(也是唯一的)孩子,使用我原来的语法没有达到预期的结果 –
@BrianS我也添加了一些关于'nnth-child'的额外注释,但你现在已经明白了。 '=]'事情是,如果你单独包装每个元素,并且你也不能将元素预先加入到同一个容器中,则子节点会中断。所以是的,在使用'nnth-child'时要格外小心,并在将来您的DOM结构可能发生变化时避免它。 –
这是你的问题
$(".outer").wrap("<div class='column'></div>");
这适用的.column
类的一切,这使得每个.outer
每列的第一个元素。您的选择器应该是:
$(".column:nth-child(1) .outer").addClass("cube-anim");
$(".column:nth-child(2) .outer").addClass("triangle-anim");
$(".column:nth-child(3) .outer").addClass("circle-anim");
为什么不仅仅是基于元素中的文本添加类和包装? – adeneo
这里回答过类似的问题 - http://*.com/questions/19909458/selecting-nth-of-type-in-selenium/19909750#19909750 – sircapsalot
,因为这是我的任务与挑战,adeneo –