Question

这看起来应该很容易，而且我已经阅读了很多文档，但似乎无法找到答案。

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

我需要获取每个journal-image-container并将其应用于每个journal-image-caption。

在页面上有多个这样的实例，所以每个（）语句最好。

这是我的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，那么效率可能会低一些。如果你的数量少于一百，那么差异可以忽略不计：

    $(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);
});

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

3 个答案: