CODEWITHSUNDEEP
javascriptjquery
sheriffderek
sheriffderek

Reputation: 9053

find height of children, give largest height to all others

I have some block level responsive lists. Everything is dandy unless one of the items has a bunch more copy than another. I can find the tallest li and give it's height to the other li's - but I want to limit this to each individual list only. I would also like to do this again if the user resizes but things get wild. Anybody deal with this before? Thanks!

HERE is a codepen of what I have so far

/*var largestItem = -1; why negative one instead of 0 ? */

var largestItem = -1;

// I want to make this only affect the children of each list

$(".item-list li").each(function() {

  itemHeight = $('.item-list li').outerHeight();

  $(this).height(itemHeight);

  $('.number').text(itemHeight);

});




$(window).resize(function() {

  console.log("Resize event has happened. I don't know why, but alert is going haywire...");

  // I would like to listen for resize events and run the whole function again... 

});

Upvotes: 0

Views: 128

Answers (1)

charlietfl
charlietfl

Reputation: 171698

itemHeight = $('.item-list li').outerHeight();

Problem here is that you are checking for a single value on a collection of eleemnts. jquery will only return the value of the first in that collection. In addiiton you aren't keeping track of which is tallest

$('.item-list').each(function(){
    var maxHt=0;

    $(this).children().each(function() {
      /* "this" is the current element*/
      var ht=$(this).outerHeight();       
       maxHt = ht > maxHt ? ht : maxHt;     
    }).height( maxHt);

})

Upvotes: 3

Related Questions