CODEWITHSUNDEEP
jqueryhtmlcss
Matthew Artiman
Matthew Artiman

Reputation: 179

Jquery - Get the highest height out of three different divs

I'm currently working on a pinterest based grid system, everything's all fine and dandy and working except for one thing. The problem being because i'm using absolute positioning the container that wraps them all has to be set as actual pixels, so i came up with this code:-

$(document).ready(function(){
    $('.newsPageMain').css({height:(($('#newsEntry:nth-child(1)').height()) + ($('#newsEntry:nth-child(4)').height()) + ($('#newsEntry:nth-child(7)').height()) + 141)}); // ID 9
});

It works to a degree but the problem is, if another row is longer, the longest one is cropped off, so essentially i want to be able to work out the highest of nth-chlds 1,2,3 then 4,5,6 then 7,8,9 so i can add the highest together so the container will wrap correctly

I hope this makes sense, any help would be greatly appreciated

Thank you

~Matt

Upvotes: 1

Views: 185

Answers (2)

billyonecan
billyonecan

Reputation: 20250

If I understand correctly you want to get the tallest element from every group of 3 elements in the collection:

var $els = $('#newsEntry div'),
    height = 0;

for (var i = 0; i < $els.length; i += 3) {
    height += Math.max.apply(null, $divs.slice(i, i+3).map(function() {
        return $(this).height();
    }).get());
}

If you want to get the height including the padding and margin, you'd use outerHeight().

Here's a fiddle

Upvotes: 4

mrpotocnik
mrpotocnik

Reputation: 1141

It's a little hackish but what about using .each to get the size of each container and set them all to the highest value? 

   var maxHeight = 0;
   $('div.mycontainerclass').each(function (index, item) {
        //console.log($(this).height());
        maxHeight = ($(this).height() > maxHeight) ? $(this).height() : maxHeight;
    });
    //console.log(maxHeight);
    //set heights etc...

Upvotes: 0

Related Questions