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

user_7321290 0
Viewed 141

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>

frontend html jquery javascript
2 Answers

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

user_46247190

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';
    });

};
user_46247190
Related