获取div的高度并将其应用于div中的元素

Question

这看起来应该很简单，我已经阅读了很多文档，但似乎找不到答案。

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

我需要获取each-journal-image-container并将其应用于each-journal-image-caption。页面上有多个这样的实例，所以使用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>

干杯，R

Answer 1

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

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

当然，您可以像这样组合这些行，但是如果您有1000个div，那么效率就会降低。如果少于100个，则差异可以忽略不计：

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

Answer 2

使用height()属性。它可以同时用于获取元素的高度和设置元素的高度。

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

Answer 3

您可以这样做：

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