CSS nth-of-type not selecting in order

CSS nth-of-type not selecting in order

I would like to use jQuery to add different classes to repeating div but
it's not working as expected… Here's my 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 this is my 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>
<!-- And so on... -->
</section>
I expect the first div to have a border on the bottom in red, second div
in blue, third in green, fourth in yellow, then red, blue, green, yellow,
etc., but it doesn't quite work out. Here's a Fiddle:
http://jsfiddle.net/7bLZ3/
What am I doing wrong?