爲什麼第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）適用於所有的孩子？

回答

相關問題