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

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");

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

2 个答案: