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

Question

Hi

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 "for loops", and if statements, but obviously jquery doesn't do this stuff in that way. Or maybe i'm supposed to do it outside the document ready statement? I tired that to but it just doesnt work.

How does one go about that?

EDIT: Important note... These squares are max 8 on a page and generated in Wordpress, each square being a post. So I'm not able to divide things into rows as suggested unfortunately.

css:

.thumb_container {
width:274px;
height: 274px;
float: left;
position: relative;
background-color: white;
}

 .thumb_container:nth-child(4n+1) { clear:both; background-color: green } /* green just to see if its working */

Jquery tweek file (http://baked-beans.tv/bb/wp-content/themes/bakedbeans/js/jquery.site.tweeks.js)

    $(".thumb_container:nth-child(8n+2), .thumb_container:nth-child(8n+4), .thumb_container:nth-child(8n+5), .thumb_container:nth-child(8n+7)")
.css({"background-color":"#333333"});

HTML Click HTML for link

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.

Answer 2

Not sure how your markup goes, but you can use the :nth-child(n) selector to achieve a checkerboard effect. I've set up an example for you here. I'm not sure how efficient it will be, although it seems fast enough for a 4x4 grid.

$("div:nth-child(8n+2),div:nth-child(8n+4),div:nth-child(8n+5),div:nth-child(8n+7)")
    .css({"background-color":"white"});​

This repeats a pattern on the 2nd, 4th, 5th and 7th every 8 divs (8n). If you have a different size grid, you'll have to tweak these selectors (and add to them).

It's much simpler if you're using a table - example:

$("tr:odd > td:even, tr:even > td:odd").css({"background-color":"white"});​

If you're willing to use wrapper divs, you can use the rows technique, wrapping every 4 divs in an outer div and using:

<div class="row"><div>1</div><div>2</div><div>3</div><div>4</div></div>
<div class="row"><div>1</div><div>2</div><div>3</div><div>4</div></div>
<div class="row"><div>1</div><div>2</div><div>3</div><div>4</div></div>
<div class="row"><div>1</div><div>2</div><div>3</div><div>4</div></div>

$(".row:odd > div:even, .row:even > div:odd").css({"background-color":"white"});​

Answer 3

You can do something like this

$("#wrapper > :nth-child(8n+1), #wrapper > :nth-child(8n+3), #wrapper > :nth-child(8n+6), #wrapper > :nth-child(8n+8)").addClass('dark');

with this HTML:

<div id="wrapper">
    <div></div>
    ... 16 divs
<div>

and this CSS:

#wrapper {
    width: 160px;
    border: 1px solid #999;
    overflow: hidden;
}

#wrapper div {
    width: 40px;
    height: 40px;
    float: left;
    background-color: #fff;
}

#wrapper .dark {
    background-color: #f5f5f5;
}

Using a wrapper here helps so that you do not need to add a class to every div, and you definitely do not need two different classes or colors - simply define a 'default' color, then override it with a added class. Oh, and the :odd, :even and nth-child selectors work on the elements they are attached to - in your case, the .thumb_container element. .thumb_container > :even would work, for future reference.

Have a look at the actual code here: http://jsfiddle.net/HjMrx/

Answer 4

another way to do it would be [not proofed for function but demonstrates the logic]:

 $('div').click(function(e){
  $tester=$(this).children('div.Other').size();
        for(var $j=0;$j<$tester;$j=$j+1){
                      if($j%2==0){
              $(this).children().eq($j).css(...);
                      }else{
                              $(this).children().eq($j).css(...);
                      }
        }

 });

Answer 5

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");

     }

});

Answer 6

This can be done in 2 lines of jquery.

Here's the HTML format that I used for this:

<div id="container">
<div class="row">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="row">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
</div>

CSS:

#container {
        width: 816px;
        margin: 0 auto;
    }
    #container .row div {
        width: 100px;
        height: 100px;
        float: left;
        background: #fff;
        border: 1px solid black;
    }
    .dark {
        background: #000 !important;
    }

jquery:

$(document).ready(function() {
        $("#container .row:nth-child(even) div:nth-child(even)").addClass("dark");
        $("#container .row:nth-child(odd) div:nth-child(odd)").addClass("dark");
});

This tells it to set a class of dark for every even div on every even row and set that class on the odd divs in the odd rows.