jquery - 使用 jQuery 将两个元素的大小调整为最大的一个

Question

在有人链接到其中一个列之前，这不是关于列布局的问题。

我在页面的不同区域有两个文本框，我希望它们的高度相同。它们使用 jQuery 异步呈现。我用这样的东西加载数据:

$.ajax({
  url: someUrl,
  dataType: 'html',
  type: 'GET',
  success: function(data) {
    $(mySelector).html(data)
  },
  complete: function() {
    adjustHeights()
  }
})

正在调用 adjustHeights(即使我剪掉了一些内容，引用仍然有效)。选择器也返回适当的元素。我获取与选择器匹配的所有事物的高度，然后将当前事物的最大高度(比如一个是 38px 高，一个是 50px 高，它返回 50px)应用到所有这些。

问题是，虽然 adjustHeights 工作得很好，但如果我在加载内容后的某个时间调用它(比如单击按钮或通过调试器)，当它在这里运行时，它会在呈现所有内容之前获取高度。我怀疑自定义字体可能起了作用，但我不确定。

有什么好的方法可以告诉 jQuery“不认真，在一切都真实呈现之前不要运行它。”。我的理解是，这应该已经发生了，但实际上并没有。

编辑 刚刚验证如果我去掉 CSS 中的字体或行高，这个问题就会消失。

Answer 1

您可能会发现可以使用零超时。通常在向 DOM 中插入内容时，连续的 js 在 DOM 完全更新之前运行。这在替换 DOM 中的内容后直接做动画时最为明显，它可能会生涩甚至直接跳到最终状态。在您的情况下，尺寸似乎在您需要它们之前还没有完全更新。一个(hacky - Andrew 是对的)解决方法是:

setTimeout(adjustHeights, 0);