如何使用jQuery将指定DIV下的h3元素高度统一设置为最大值

原有代码问题说明 #

• 脚本标签错误：同一个<script>标签同时设置了外部资源src属性和内嵌JS代码，浏览器会忽略内嵌的JS逻辑，导致代码不执行
• 高度计算不准确：原有逻辑使用height()仅计算元素内容高度，未包含padding、border属性，统一设置后可能出现文字折行溢出
• 未适配响应式场景：窗口大小变化时h3文字可能折行，高度不会自动重新适配

修正后完整代码 #

<!-- 引入jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- 自定义高度统一逻辑 -->
<script>
$(document).ready(function() {
  // 封装高度统一函数，方便重复调用
  function setEqualH3Height() {
    var highestBox = 0;
    // 遍历目标h3元素计算最大高度，使用outerHeight包含内边距和边框
    $('.fast-easy-order h3.color-tan-bright').each(function() {
      // 先重置高度为auto，避免之前设置的固定高度影响计算
      $(this).height('auto');
      var currentHeight = $(this).outerHeight();
      if (currentHeight > highestBox) {
        highestBox = currentHeight;
      }
    });
    // 统一设置所有目标h3的高度为最大高度
    $('.fast-easy-order h3.color-tan-bright').height(highestBox);
  }

  // 页面加载完成后执行一次
  setEqualH3Height();

  // 窗口大小变化时重新计算，适配响应式布局
  $(window).resize(function() {
    setEqualH3Height();
  });
});
</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>

改动说明 #

• 拆分了脚本标签，单独用一个标签引入jQuery，另一个标签写自定义逻辑，保证代码可以正常执行
• 计算高度前先重置h3高度为auto，避免之前设置的固定高度影响响应式场景下的高度计算结果
• 替换height()为outerHeight()，计算的高度包含内边距和边框，避免文字溢出
• 增加了窗口 resize 事件监听，响应式布局下窗口尺寸变化时会自动重新计算高度适配
• 选择器精准指定为h3.color-tan-bright，避免误选.fast-easy-order下其他不符合要求的h3元素

内容的提问来源于stack exchange，提问作者CodeForGood