Question

In a previous question, I set Equal heights on individual <li> tags from UL groups on a page. But now I realize for better theming, I’d like to take the tallest height set on a group of <li> tags within a UL group and set that to its respective parent <ul> itself specifically for better theming of my page. I have a new fiddle here where I try to find the tallest height of an <li> within a UL group and set it to the UL.

The issue still is specificity. The tallest height of the the <li> from the first UL group is being set to all <ul> tags on the page. The height of the tallest <li> in UL group (row 1) is 260px and the height from Row 2 is 156px. However, 260px is still being set to both UL tags on the page. The ULs will grow upon the page so I’d like the code to be extensible without having to specify each row in JQuery. So far I have tried this:

// get the height of the tallest LI within each UL group
    var max = Math.max.apply(Math, $(".item-list ul li").map(
        function(){
          return $(this).height();
        }
      ));

// now render the height in each parent UL

    $(".item-list ul").each(function() {
      $(this).find(".item-list ul").height(max);
    });

… but the second part does not work. This works but…

$(".item-list ul").height(max);

… it puts the height of the tallest <li> on the pages for all UL tags. Ideally the final HTML should be:

<div class="item-list row-1">
<ul style="height: 260px;">
etc...

<div class="item-list row-2">
<ul style="height: 156px;">
etc...

Working version based on this one below

Answer 1

If I understand you correctly, you should do the max operation in the .each() loop.

function thisHeight(){
    return $(this).height();
}

$(".item-list ul").each(function() {
    var thisULMax = Math.max.apply(Math, $(this).find("li").map(thisHeight));
    $(this).height(thisULMax);
});

I also made the map function a named function so you can reuse it.

---

Here are a couple more solutions that are a little cleaner.

This one passes a function to height() to use it as the iterator. Shortens things a bit.

function thisHeight(){
    return $(this).height();
}

$(".item-list ul").height(function() {
    return Math.max.apply(Math, $(this).find("li").map(thisHeight));
});

---

Here’s another way using .reduce(), though it needs a shim for IE8 and lower.

function maxHeight(max, elem) {
    var h = $(this).height();
    return max > h ? max : h;
}

$(".item-list ul").height(function() {
    return $(this).find("li").toArray().reduce(maxHeight, 0);
});