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

Hi All this is driving me mental.

Also what I dont get about Stack Overflow, as genius as it is, is that you can't just show new alternatives to the same question... Like When You answer you can't just put new code sample in there if you are he one asking the question?! What am i getting wrong here.

So now I'm Answering my question but actually not, I'm just showing the problem in a new way.

So anyway, I'm trying this in every way possible, with no luck, would really appreciate some help here. Check out the page in question here http://baked-beans.tv/bb

It should be making a grid as shown in the first post of this thread, but it's not alternating as it should.

The :nth-child(4n+4) works when i use jsfiddler but not when I do it in wordpress, that's the conundrum. Why would wordpress mess it up?

    function oddRow() {
        $(".thumb_container:odd").css("background-color", "#f00");
        $(".thumb_container:even").css("background-color", "#fff");

    };

    function evenRow() {
        $(".thumb_container:odd").css("background-color", "#fff");
        $(".thumb_container:even").css("background-color", "#f00");
    };


$('.thumb_container').each(function(i) {

     i=(i+1);

     if (i%4==0 ){

        if (switchMe == false){
        switchMe = true;
        }

        else if (switchMe == true){
        switchMe = false;
        }
     }

     if (switchMe == false){
        oddRow();
        $(this).css("background-color", "#000");

     } else if (switchMe == true){
        evenRow();
        $(this).css("background-color", "#000");

     }

});