Добавьте класс к nth-потомку родителя, который имеет определенный класс, с помощью jquery

Question

Это лучше всего объяснить с помощью Fiddle: http://jsfiddle.net/hxsJx/

Я хочу добавить класс к n-ным дочерним элементам, но только когда у этих дочерних элементов есть определенный класс.Таким образом, в моем примере, только статьи E и J должны получить класс 'end'.

Кажется, селектор nth-child игнорирует селектор класса, что, вероятно, является предполагаемым поведением, но я просто не могунайти способ обойти это.

Спасибо за любые указатели люди ...

Answer 1

Селектор работает как положено. Помните, что селектор CSS :nth-child основан на одном (он начинает считать с одного).

Элементами 4n являются D и H, которые действительно имеют класс 1.

Ваш селектор: .articles article.1:nth-child(4n)

HTML:

<section class="articles">          .articles
<article class="1 4">A</article>        :nth-child(1)
<article class="1 4">B</article>        :nth-child(2)
<article class="2 2">C</article>        :nth-child(3)
<article class="1">D</article>          :nth-child(4)  and  :nth-child(4n) and .1
<article class="1">E</article>          :nth-child(5)
<article class="3 2">F</article>        :nth-child(6)
<article class="1 4">G</article>        :nth-child(7)
<article class="1 2">H</article>        :nth-child(8)  and  :nth-child(4n) and .1
<article class="1 3 4">I</article>      :nth-child(9)
<article class="1 2 4">J</article>      :nth-child(10)
</section>

Answer 2

Нет, Роб W прав.

//$('.articles article').removeClass('end');
$('.articles article.1:nth-child(4n)').addClass('end');​

Делает D и H целью, но если вы установите для нее

//$('.articles article').removeClass('end');
$('.articles article.1:nth-child(5n)').addClass('end');​

E и J станут целью.

РЕДАКТИРОВАТЬ: 4-й ребенокD и H. D равно 4, а H равно 8.

1 = A
2 = B
3 = C
4 = D

и т. Д., Ваши цифры перепутаны.E и J - 5-й и 10-й дети соответственно.

Answer 3

Попробуйте Lettering.js http://letteringjs.com/