jQuery：each循环添加所有H3后如何获取最高H3高度？

嘿，我之前也踩过类似的坑！你得到离谱高度值的核心原因，大概率是在H3元素还没被插入DOM、或者样式还没完全生效的时候就去计算高度了——浏览器没法正确算出它在页面里渲染后的实际高度。

常见的错误场景 #

比如你可能写了类似这样的代码：

let maxHeight = 0;
$.each(yourData, function(i, item) {
  const $h3 = $('<h3>' + item.title + '</h3>');
  // 这里直接计算高度，但$h3还没加到页面里！
  const h3Height = $h3.height();
  if (h3Height > maxHeight) maxHeight = h3Height;
  $('.target-container').append($h3);
});
$('h3').height(maxHeight);

这种情况下，处于离线状态的H3没有父容器的宽度限制，也没应用页面的CSS样式（比如行高、字体大小、padding等），浏览器会按照默认的无限宽度渲染文本，导致高度计算完全偏离实际。你得到的415px，可能就是文本在无宽度约束下的异常高度结果。

正确的操作步骤 #

你需要调整顺序，先确保所有H3都完成渲染，再去计算高度：

1. 先批量生成并插入所有H3：把所有动态创建的H3都添加到页面中，让浏览器完成渲染流程。
2. 遍历已渲染的H3计算最大高度：此时每个H3都继承了父容器的样式和宽度，能得到准确的实际高度。
3. 统一设置所有H3的高度：用计算出的最大值来同步所有H3的高度。

示例代码：

// 第一步：先把所有H3插入DOM
$.each(yourData, function(i, item) {
  const $h3 = $('<h3>' + item.title + '</h3>');
  $('.target-container').append($h3);
});

// 第二步：计算所有H3中的最大高度
let maxHeight = 0;
$('h3').each(function() {
  // 用height()获取内容高度，outerHeight(true)可包含margin，根据需求选择
  const currentHeight = $(this).height();
  if (currentHeight > maxHeight) {
    maxHeight = currentHeight;
  }
});

// 第三步：统一设置高度
$('h3').height(maxHeight);

额外注意点 #

• 如果H3所在的父容器是隐藏状态（比如display: none），计算出的高度也会错误，要确保计算时容器是可见的（可以临时显示，计算完再隐藏）。
• 确认代码在$(document).ready()内执行，保证DOM和CSS都已加载完成。

按照这个流程操作，就能得到准确的H3高度，再统一设置就没问题啦！

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