CODEWITHSUNDEEP
jquerycss
Syed
Syed

Reputation: 16513

jquery - Group element by Three

I have 12 LI elements. How to group them by three and check which LI has more height among three and assign greater height value to other two LI in the group.

The LIs will be dynamically populated and the height will differ to each other, so I like to keep 3 LIs in the row and check which has more height and apply it to other two LIs in the 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 as follows:

UL>LI{
float:Left;
width:33.33%
}

Upvotes: 1

Views: 89

Answers (1)

Ankur Aggarwal
Ankur Aggarwal

Reputation: 3101

A try from my 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. It is similar to the clientHeight property, but it returns the height including the padding, scrollBar and the border.

Fiddle: http://jsfiddle.net/Y6b9a/

Upvotes: 3

Related Questions