javascript - CSS nth-of-type not selecting in order -
i use jquery add different classes repeating div
it's not working expected… here's javascript:
$('div.cake:nth-of-type(1n)').css('border-bottom', '3px solid red'); $('div.cake:nth-of-type(2n)').css('border-bottom', '3px solid blue'); $('div.cake:nth-of-type(3n)').css('border-bottom', '3px solid green'); $('div.cake:nth-of-type(4n)').css('border-bottom', '3px solid yellow');
and html:
<section id="menu"> <h1>title</h1> <p>texty text lorem ipsum blah blah</p> <div class="cake"> <a href="#"><img src="http://lorempixel.com/400/400/food/1/" /> <span class="caption">image 1 here</span></a> </div> <div class="cake"> <a href="#"><img src="http://lorempixel.com/400/400/food/2/" /> <span class="caption">image 2 here</span></a> </div> <div class="cake"> <a href="#"><img src="http://lorempixel.com/400/400/food/3/" /> <span class="caption">image 3 here</span></a> </div> <!-- , on... --> </section>
i expect first div
have border on bottom in red, second div
in blue, third in green, fourth in yellow, red, blue, green, yellow, etc., doesn't quite work out. here's fiddle: http://jsfiddle.net/7blz3/
what doing wrong?
you need use offsets:
$('div.cake:nth-of-type(4n+1)').css('border-bottom', '3px solid red'); $('div.cake:nth-of-type(4n+2)').css('border-bottom', '3px solid blue'); $('div.cake:nth-of-type(4n+3)').css('border-bottom', '3px solid green'); $('div.cake:nth-of-type(4n+4)').css('border-bottom', '3px solid yellow');
the reason e.g. after setting 2n 4th item set well... 4n overwrite , naturally doesn't work properly. not mention 1n set them , 3n set items 3 , 6 , overwrite 3rd instance of 2n.
Comments
Post a Comment