Jquery - How to alternate an :Odd :Even pattern every 4 ?

Question

I\'m trying to make a pattern in a layout (see attachment for visualisation) The problem is that using :odd :even doesnt work.

I\'ve tried to make it work by using \

Answer 1

var i = 1;
$('#wrapper > div').each(function()
{
    var isEvenRow = Math.ceil(i / 4) % 2 == 0; // 4 is number of columns
    var isCellAlternate = i % 2 == isEvenRow ? 0 : 1;

    if ( isCellAlternate ) {
        $(this).css("background-color", "#000");
    } else {
        $(this).css("background-color", "#ccc");
    }
    i++;
});​

or the less readable but shorter version:

var i = 1;
$('#wrapper > div').each(function() {
    if (i % 2 == (Math.ceil(i / 4) % 2 == 0) ? 0 : 1) $(this).css("background-color", "#000");
    else $(this).css("background-color", "#ccc");
    i++;
});​

essentially you change the test for the alternate cell every row.