jQuery: How to set max height of 3 'h3' element under a specific DIV to all h3 element?

Question

The code snippet below is a part of a WordPress page being developed. I need to set heights of all the 4 h3 elements to the highest of them using jQuery . Could anyone please help me fix the jQuery function below to do this?

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> $(document).ready(function() { var highestBox = 0; $('.fast-easy-order .color-tan-bright').each(function() { if ($(this).height() > highestBox) { highestBox = $(this).height(); } }); $('.fast-easy-order h3').height(highestBox); }); </script> <div class="fast-easy-order"> <div class="relative flex-content-row flex-id-icon_columns"> <div class="icon-column-repeater mt-row"> <div class="wrap-x"> <div class="inside"> <div class="row center-xs"> <div class="col col-xs-12 col-sm-8 col-md col-lg"> <div class="icon relative mb"> <div class="object-contain-wrap"> <img src="https://dev-packed-with-purpose.pantheonsite.io/wp-content/uploads/2021/11/Address_Collection.png" alt=""> </div> </div> <h3 class="mb0 h3 color-tan-bright">DEDICATED GIFT CONCIERGE</h3> <article class="mt"> <p>We connect you with a personal assistant to find the perfect gift for any occasion</p> </article> </div> <div class="col col-xs-12 col-sm-8 col-md col-lg"> <div class="icon relative mb"> <div class="object-contain-wrap"> <img src="https://dev-packed-with-purpose.pantheonsite.io/wp-content/uploads/2021/11/Custom_Branding.png" alt=""> </div> </div> <h3 class="mb0 h3 color-tan-bright">CORPORATE BRANDING</h3> <article class="mt"> <p>We'll take care of the details by collecting all your recipients' addresses for effortless delivery</p> </article> </div> <div class="col col-xs-12 col-sm-8 col-md col-lg"> <div class="icon relative mb"> <div class="object-contain-wrap"> <img src="https://dev-packed-with-purpose.pantheonsite.io/wp-content/uploads/2021/11/Gift_Concierge.png" alt=""> </div> </div> <h3 class="mb0 h3 color-tan-bright">ADDRESS COLLECTION SERVICE </h3> <article class="mt"> <p>We'll take care of the details by collecting all your recipients' addresses for effortless delivery</p> </article> </div> <div class="col col-xs-12 col-sm-8 col-md col-lg"> <div class="icon relative mb"> <div class="object-contain-wrap"> <img src="https://dev-packed-with-purpose.pantheonsite.io/wp-content/uploads/2021/11/Order_Fulfillment.png" alt=""> </div> </div> <h3 class="mb0 h3 color-tan-bright">SEAMLESS ORDER FULFILLMENT</h3> <article class="mt"> <p>Send gifts to a conference location or drop-ship to 5,000 recipients — we'll handle it all for you</p> </article> </div> </div> </div> </div> </div> </div> </div>

Answer 1

This JQuery statement will find all ocurrences of h3 within <div class="fast-easy-order"> and modify his height by using css() method to get a computed style property of elements.

 $(".fast-easy-order").find("h3").css("height","100%");

as a basic example I just use to change text color into green.

 $(".fast-easy-order").find("h3").css("color","green");

 <div class="fast-easy-order"> <div class="relative flex-content-row flex-id-icon_columns"><div class="icon-column-repeater mt-row"> <div class="wrap-x"> <div class="inside"> <div class="row center-xs"> <div class="col col-xs-12 col-sm-8 col-md col-lg"> <div class="icon relative mb"> <div class="object-contain-wrap"> <img src="https://dev-packed-with-purpose.pantheonsite.io/wp-content/uploads/2021/11/Address_Collection.png" alt=""> </div> </div> <h3 class="mb0 h3 color-tan-bright">DEDICATED GIFT CONCIERGE</h3> <article class="mt"><p>We connect you with a personal assistant to find the perfect gift for any occasion</p> </article> </div> <div class="col col-xs-12 col-sm-8 col-md col-lg"> <div class="icon relative mb"> <div class="object-contain-wrap"> <img src="https://dev-packed-with-purpose.pantheonsite.io/wp-content/uploads/2021/11/Custom_Branding.png" alt=""> </div> </div> <h3 class="mb0 h3 color-tan-bright">CORPORATE BRANDING</h3> <article class="mt"><p>We'll take care of the details by collecting all your recipients' addresses for effortless delivery</p> </article> </div> <div class="col col-xs-12 col-sm-8 col-md col-lg"> <div class="icon relative mb"> <div class="object-contain-wrap"> <img src="https://dev-packed-with-purpose.pantheonsite.io/wp-content/uploads/2021/11/Gift_Concierge.png" alt=""> </div> </div> <h3 class="mb0 h3 color-tan-bright">ADDRESS COLLECTION SERVICE </h3> <article class="mt"><p>We'll take care of the details by collecting all your recipients' addresses for effortless delivery</p> </article> </div> <div class="col col-xs-12 col-sm-8 col-md col-lg"> <div class="icon relative mb"> <div class="object-contain-wrap"> <img src="https://dev-packed-with-purpose.pantheonsite.io/wp-content/uploads/2021/11/Order_Fulfillment.png" alt=""> </div> </div> <h3 class="mb0 h3 color-tan-bright">SEAMLESS ORDER FULFILLMENT</h3> <article class="mt"><p>Send gifts to a conference location or drop-ship to 5,000 recipients — we'll handle it all for you</p> </article> </div> </div> </div> </div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

This could be achieved using CSS and flexbox styling if they are contained within the same container.

If flexbox isn't possible due to the layout, for example h3 tags in different containers and unable to apply flexbox styles, Id take a look at using:

https://github.com/liabru/jquery-match-height

Answer 3

Javascript:

window.addEventListener("load", function () {
    matchHeight('[data-mh="match"]');
});

window.addEventListener("resize", function () {
    setTimeout(function () {
        matchHeight('[data-mh="match"]');
    });
});

const matchHeight = (element) => {
    let tallest = 0;

    const elements = [...document.querySelectorAll(element)];

    elements.map((el)=> {
        if (el.offsetHeight > tallest) {
            tallest = el.offsetHeight
        }
    });

    elements.map((el)=> {
        el.style.height = tallest + 'px';
    });

};