为什么第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/

来源

2013-11-14 Brian S

为什么不仅仅是基于元素中的文本添加类和包装？ – adeneo

这里回答过类似的问题 - http://stackoverflow.com/questions/19909458/selecting-nth-of-type-in-selenium/19909750#19909750 – sircapsalot

，因为这是我的任务与挑战，adeneo –

每个.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");

来源

2013-11-14 20:28:29

我明白了。这是我的（不正确的）理解，第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");

来源

2013-11-14 20:37:01 Andrew

为什么第n个孩子（1）适用于所有的孩子？

回答

相关问题