Add different class to every 7 elements using jquery

html, javascript, jquery

Solution

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/

Problem

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!

Original source