平等高度JS

Question

Good evening,

I have been using a javascript to generate equal height columns using the following JS:

<script type="text/javascript">
    var maxHeight = 0;
    $(".level").each(function(){
    maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight;
    }).height(maxHeight);
</script>

However, I wanted to be able to add additional classes and was advised to amend my code to that shown below. One other reason was to prevent the script creating a global variable like the one above.

Now the problem is, the first class works but the additional ones don't seem to be. They are generating a height but not an equal height. Can anyone help me work out the problem?

<script type="text/javascript">
    (function() {
        function equalHeights(selector) {
        var maxHeight = 0;
        function calcEqualHeight() {
        var el = $(this);
        maxHeight = el.height() > maxHeight ? el.height() : maxHeight;
        el.height(maxHeight);
        }
        selector.each(calcEqualHeight);
        }

        equalHeights($('.level-1'));
        equalHeights($('.level-2'));
        equalHeights($('.level-3'));
      })();
</script>

Answer 1

You need to set the height after you complete the loop:

(function() {
    function equalHeights(selector) {
        var maxHeight = 0;
        function calcEqualHeight() {
            var el = $(this);
            maxHeight = el.height() > maxHeight ? el.height() : maxHeight;
        }
        selector.each(calcEqualHeight).height(maxHeight);
    }

    equalHeights($('.level-1'));
    equalHeights($('.level-2'));
    equalHeights($('.level-3'));
  })();