Change class to different li

Question

I have 18 images that are displayed as 6 images in each row. I want to assign a different class for every second last and last image in a row. eg: -

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 

Here the class should be different for 5 6 11 12 17 18

I can make an equation for this, leaving 5 6

it can be 5n + (n-1) 6n starting from n = 2

  5(2) + (2-1) 6(2) = 11 12 5(3) + (3-1) 6(3) = 17 18 

I am not sure how to implement this with jquery. AS 5 6 should be as it is, and then the equation for 11,12,17,18 and the beginning n = 2

 <li><a href="#"><span></span><img src="images/img14.jpg" alt="" width="136" height="136" /><em class="popup"> <strong class="arrow"></strong><strong class="title">Sponsor Name Here</strong>Lorem ipsum dolor sit amet, consectetur edt adipiscing elit. Nullam dignissim enim ut co. Lorem ipsum dolor sit amet, consectetur bel adipiscing elit nullam digniss</em></a></li> 

In em I want to add a popup-left class

Answer 1

You do not need jQuery for this.

The following selector will apply the styles you need:

 li:nth-child(6n) img, li:nth-child(6n-1) img { /* styles here */ } 

See updated demo

Answer 2

If I understood well (and suppose you have li elements)

 $('li:nth-child(6n+4)').addClass('class1'); $('li:nth-child(6n+5)').addClass('class2'); 

or just define that selectors as direct css (but in this case it will not work on IE<9 )

 li:nth-child(6n+4) { ... } li:nth-child(6n+5) { ... } 

if necessary change li to your real element ( img , p or something else)