Reputation: 9053
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
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