为什么nth-child（1）适用于所有孩子？

Question

基于这个非常基本的HTML结构：

<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/

Answer 1

每个.outer是.outer的唯一子.column ，因此:nth-child(1) （在功能上等同于: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");

Answer 2

这是你的问题

$(".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");