jQuery: 如何将特定 DIV 下的 3 'h3' 元素的最大高度设置为所有 h3 元素？

Question

下面的代码片段是正在开发的 WordPress 页面的一部分。我需要使用 jQuery 将所有 4 个 h3 元素的高度设置为其中最高的元素。谁能帮我修复下面的 jQuery 函数来执行此操作？

<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

这可以使用 CSS 和 flexbox 样式来实现，如果它们包含在同一个容器中的话。

如果由于布局原因无法使用 flexbox，例如不同容器中的 h3 标签无法应用 flexbox 样式，我会考虑使用：

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

Answer 2

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

};

jQuery: 如何将特定 DIV 下的 3 'h3' 元素的最大高度设置为所有 h3 元素？

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

html

javascript

jquery

frontend