Question

I have following script:

var height = 0;
$('.scroller').each(function() {

    $(this).children('div').each(function() {

        if (height < $(this).height()) {
            height = $(this).height();
        }

    });
    $(this).css("height", height + "px");

});

What it does:

• loop through each children div inside each .scroller div
• height < $(this).height() = if height of the currently looped div is bigger than 0 it is setting the height of this div as new value of the height variable
• this way is finding the highest div element in each .scroller div
• than, the height (height of the highest element ) is set to .scroller div

The issue:

• if any element inside first ‘.scroller’ is higher than ANY element in the second .scroller it is setting the height (highest element in first .scroller) also to second scroller – example: http://jsfiddle.net/MrTest/7jAAG/20/

Is element in the first .scroller are not higher than elements in second .scroller everything works fine – example: http://jsfiddle.net/MrTest/7jAAG/16/

I think the problem is setting the height var – how can I reset this value to 0 BEFORE going to loop though second .scroller ?

Answer 1

I may be misunderstanding but could you not just do this:

$('.scroller').each(function() {
    var height = 0;
    $(this).children('div').each(function() {

        if (height < $(this).height()) {
            height = $(this).height();
        }

    });
    $(this).css("height", height + "px");

});

the height variable will then get reset for each instance of .scroller in the DOM that’s looped through.