Equal columns height with grouping in jquery

 
Equal columns height with grouping in jquery

Recently, I worked project needs comparison page for multiple records. There i faced a problem for different columns blocks height. So i made small script for adjust height.

<td>
<ul>
<li class=”jentlahyter” data-group=”summary”></li>
<li class=”jentlahyter” data-group=”body”></li>
</ul>
</td>
<td>
<ul>
<li class=”jentlahyter” data-group=”summary”></li>
<li class=”jentlahyter” data-group=”body”></li>
</ul>
</td>

function jentlaHyter(selector) {
var els = $(selector), group, tmp;
if (els.length) {
var maximum = [];
for (var i=0;i<els.length;i++)
{
group = $(els[i]).attr(‘data-group’);
tmp = typeof maximum[group] != ‘undefined’ ? maximum[group] : 0;
if ($(els[i]).height() > tmp) {
maximum[group] = $(els[i]).height();
}
}

for (var i=0; i<els.length;i++) {
group = $(els[i]).attr(‘data-group’);
$(els[i]).height(maximum[group]);
}
}
}

$(document).ready(function () {
jentlaHyter(‘.jentlahyter’);
});