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中的font-face或line-height，这个问题就会消失。

Answer 1

您可能会发现可以使用零超时。通常在将内容插入DOM时，在DOM完全更新之前运行连续的js。在替换DOM中的内容后直接进行动画时，这是最明显的，它可能是生涩的，甚至可以直接跳到最终状态。在您的情况下，似乎尺寸在您需要之前尚未完全更新。 A（hacky - Andrew是对的）解决方法是：

setTimeout(adjustHeights, 0);

Answer 2

我认为您没有尝试过以下操作？

complete: function() {
    $(document).ready(function () {
        adjustHeights();
    });
}

此外，在“完整”定义之后，您有一个无关的逗号。

希望这有帮助。

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

2 个答案: