jquery - 为什么 nth-child(1) 适用于所有 child ？

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() 在有 sibling 的上层:

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