how can i add a different calls to each row ?
hello.
i am trying to add a different class to each row so that i can set a different equal height for each row.
for example
row1
row1
row1
row2
row2
row2
row3
row3
row3
i have tried the following but its not working how i want it to. i would rather it so that the first 3 have a class of row1 then the next 3 have a class of row 2 etc...
this is my list of 12 divs
- <div class="box-grid">
<div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
</div>
i then put them in to groups of 3 for 3 on each row
- var divs = $(".item");
- for (var i = 0; i < divs.length; i+=3){
divs.slice(i, i+3).wrapAll("<div class="row"></div>);
}
which gives me
- <div class="box-grid">
<div class="row">
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- </div>
- <div class="row">
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- </div>
- <div class="row">
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- </div>
- <div class="row">
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- </div>
</div>
now from there i could give each row an index number and then target each item inside that with the equal height function but i think i would rather not wrap the divs. i would rather do like i first said. so that the first 3 have a class of row1 then the next 3 have a class of row 2 etc...
how can i do that.
thanks
ricky