3

基于这个非常基本的 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/

4

2 回答 2

2

每个.outer都是 a 的唯一孩子.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");
于 2013-11-14T20:28:29.463 回答
0

这是你的问题

$(".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-14T20:37:01.560 回答