Add different class to every 7 elements using jquery

Question

I'm creating a blog page with a list of posts. Each blog post has the same html for example:

<article class="post">
  post 1
</article>

I want to give every 7 articles a sequence of classes ('medium','small','large','large','small','small','medium')

<article class="post medium">
  post 1
</article>
<article class="post small">
  post 2
</article>
<article class="post large">
  post 3
</article>
<article class="post large">
  post 4
</article>

When I post blog number 8 it starts all over. Is this even possible?

Any points to the right direction would be very welcome!

Answer 1

You could use the addClass and check its index:

var classNames = ['medium','small','large','large','small','small','medium'];

$('article.post').addClass(function(i){
    return classNames[ i % classNames.length ];
});

demo: http://jsfiddle.net/wgdv4/