css - jquery - Group element by Three -

i have 12 li elements. how group them 3 , check li has more height among 3 , assign greater height value other 2 li in group.

the lis dynamically populated , height differ each other, keep 3 lis in row , check has more height , apply other 2 lis in same row.

<ul>   <li>001</li>   <li>002</li>   <li>003</li>   <li>004</li>   <li>005</li>   <li>006</li>   <li>007</li>   <li>008</li>   <li>009</li>   <li>010</li>   <li>011</li>   <li>012</li>  </ul> 

style follows:

ul>li{ float:left; width:33.33% } 

a try side:

js/jquery

var list=$('ul>li'); for(var i=0;i<list.length;i+=3) {     max=-1;     for(var j=i;j<i+3;j++)     {        var h = list[j].clientheight;         max = h > max ? h : max;     }     for(var k=i;k<i+3;k++)     {         list[k].style.height = max+'px';     }  } 

you can use offsetheight property also. similar clientheight property, returns height including padding, scrollbar , border.

fiddle: http://jsfiddle.net/y6b9a/