Почему nth-child (1) применяется ко всем детям?

Исходя из этого очень простой HTML структуры:Почему nth-child (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» дополнительным классом, который будет вызываться 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");

И я имею в виду «работает только» в том, что, если первый ребенок из column "не является столбцом, тогда индекс дочерних элементов всех столбцов будет смещен на 1. Как вы можете видеть, nth-child довольно хрупкий во многих случаях использования.

Другим возможным решением с использованием .closest():

$('.triangle').closest('.outer').addClass("triangle-anim");

источник

2013-11-14 20:28:29

Я вижу. Это было мое (неправильное) понимание того, что nth-child (n) будет применяться к n-му вхождению этого элемента в дерево документа. Теперь я понимаю, что поскольку каждый .outer был первым (и единственным) дочерним элементом его родителя, использование моего исходного синтаксиса не давало желаемых результатов –

@BrianS Я добавил некоторые дополнительные заметки о 'nth-child', но также, но вы уже поняли это сейчас. '=]' Thing is, nth-child сломается, если вы оберните каждый элемент отдельно, и вы также не сможете добавлять элементы в один и тот же контейнер. Поэтому да, проявляйте особую осторожность при использовании 'nth-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

Почему nth-child (1) применяется ко всем детям?

ответ

Смежные вопросы