Good afternoon,

 

I am using a script to make a certain class the same height. Now I am wondering how I can provide multiple classes? I tried simply adding another in but it didn't work.

 

This is the script:

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

 

Good afternoon,

 

I am using a script to make a certain class the same height. Now I am wondering how I can provide multiple classes? I tried simply adding another in but it didn't work.

 

This is the script:

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

 

 

Firstly your script is creating a global variable maxHeight, that's bad news. We can fix that by wrapping the whole lot inside of an Immediately invoked function expression (IIFE). Next we want to break the each loop into it's own function that can be called with different classnames.

(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($('.levelx'));
    equalHeights($('.levely'));
    equalHeights($('.levelz'));
})();

Edited August 30, 201510 yr by rbrtsmith

Thanks for that Rob, I am now going to look into what you said about it being a global variable. Haven't a clue what that is so it's good learning for me. Thanks :-)

I talk about scopes here: http://rbrtsmith.com/2015/02/javascript-patterns-the-iife/