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

This is not a question regarding column layouts before someone links to one of those.

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

I have two boxes of text in different areas of a page that I want to be the same height. They are rendered asynchronously with jQuery. I load the data with something like this:

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

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

adjustHeights is getting called (the reference is valid even though I clipped stuff out). The selector returns the appropriate elements too. I get the heights of all the things that match the selector and then apply the maximum height of the current ones (say one is 38px tall and one is 50px tall it returns 50px) to all of them.

adjustHeights被调用(即使我剪掉了东西,引用也是有效的)。选择器也返回适当的元素。我得到了与选择器匹配的所有东西的高度,然后应用当前的最大高度(比如一个是38px高,一个是50px高,它返回50px)给所有这些。

The problem is that while adjustHeights works perfectly fine if I call it some time after the content is loaded (say on a button click or via debugger) when it runs here it's getting the height before everything is rendered. I suspect custom font-faces may be playing a part but I'm not sure.

问题是虽然adjustHeights工作得非常好,如果我在加载内容之后调用它(比如在按钮上单击或通过调试器),当它在这里运行时,它会在渲染所有内容之前获得高度。我怀疑自定义字体可能正在扮演一个角色,但我不确定。

Is there a good way to tell jQuery "No seriously, don't run this until everything is rendered for real.". My understanding is that this should already be happening but is not.

有没有一个很好的方法来告诉jQuery“不认真,不要运行这个,直到所有内容都真实呈现。”我的理解是,这应该已经发生但事实并非如此。

Edit Just verified that this problem goes away if I get rid of the font-face or the line-height that's in the CSS.

编辑刚刚验证了如果我摆脱了CSS中的font-face或line-height,这个问题就消失了。

2 个解决方案

#1

You might find that you can use a timeout of zero. Often when inserting content into the DOM successive js is run before the DOM has completely updated. This is most obvious when doing animation straight after replacing content in the DOM, it can be jerky and even jump straight to the final state. In your case it seems dimensions haven't quite updated before you need them. A (hacky - Andrew is right) way around this is:

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

setTimeout(adjustHeights, 0);

#2

I don't suppose you've tried the following?

我不认为你已经尝试过以下几点?

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

Also, you have an extraneous comma after the 'complete' definition.

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

Hope this helps.

希望这可以帮助。

#1

setTimeout(adjustHeights, 0);

#2