jQuery：如何將特定DIV下的3個“h3”元素的最大高度設定為所有h3元素？

下面的代碼片段是WordPress正在開發的頁面的一部分。我需要將所有 4 個h3元素的高度設定為使用jQuery. 誰能幫我修復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>

uj5u.com熱心網友回復：

如果將 CSS 和 flexbox 樣式包含在同一個容器中，則可以使用它們來實作這一點。

如果由于布局而無法使用 flexbox，例如不同容器中的 h3 標簽并且無法應用 flexbox 樣式，請查看使用：

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

標籤：javascript html 查询 前端

上一篇：如何使用jquery洗掉<br>

下一篇：YouTubeDataApiV3使用jQuery獲取多個頻道的實時訂閱人數