获取 div 的高度并将其应用于 div 内的元素答案

【问题标题】：Get height of div and apply it to element within div获取 div 的高度并将其应用于 div 内的元素
【发布时间】：2013-01-24 10:17:41
【问题描述】：

这似乎应该很容易，我已经阅读了很多文档，但似乎找不到答案。

我有一些嵌套的 div，我想获取页面上每个 div 的高度并将其应用到另一个作为子元素的 div。

我需要获取 each-journal-image-container 并将其应用于 each-journal-image-caption。页面上有多个 this 实例，因此最好使用 each() 语句。

这是我的 HTML

<div class="each-journal-image-container clearfix">
    <div class="four columns">
      <div class="each-journal-image delay-1 animated fadeInLeftBig"></div>
      <div class="each-journal-image delay-1 animated fadeInLeftBig"></div>
      <div class="each-journal-image delay-1 animated fadeInLeftBig"></div>
      <div class="each-journal-image delay-1 animated fadeInLeftBig"></div>
      <div class="each-journal-image delay-1 animated fadeInLeftBig"></div>
    </div>
    <div class="two columns">
      <div class="each-journal-image-caption delay-2 animated fadeInLeftBig"></div>
    </div>
</div>

干杯，回复

【问题讨论】：

标签： jquery height each

【解决方案1】：

我能想到的最短解决方案：

$('.each-journal-image-container').each(function() {
    var h = $(this).height();
    $(this).find('.each-journal-image-caption').height(h);
});

当然，您可以像这样组合这些行，但如果您有 1000 个 div，它的效率可能会降低。如果少于一百个，差异可以忽略不计：

    $(this).find('.each-journal-image-caption').height($(this).height());

【讨论】：

我认为这会起作用......但它的高度不合适。看一看？ goo.gl/9dyB1 到目前为止谢谢 :)
哦，是的，有时有效，有时无效。也许如果我把它包起来。
将其包装在 $(window).load(function() 中，并且现在可以始终如一地工作。非常感谢，Sam。

【解决方案2】：

使用height() 属性。既可以用于获取高度，也可以用于设置元素的高度。

$('.each-journal-image-container .four').height( $('.each-journal-image-container .two').height() );

【讨论】：

我一直在尝试这个，使用不同类型的设置，但我似乎无法解决它。
@rdck - 查看代码示例。（ofq。它只是用于容器 - 你需要循环通过正确的元素来获得你需要的代码）

【解决方案3】：

你会这样做：

$('.each-journal-image-container').each(function(i,item){
    var height = $(item).height();
    $(this).find('.each-journal-image-caption').height(height);
});

【讨论】：