jquery - 使元素的高度等于 div

Question

我正在尝试使“.caption”的高度与“.post”相同。

问题是我有很多高度不同的“.post”div。

这是我的:

$(document).ready(function (){
    var postH = $('.post').height();
    $('.caption').css( "height", postH );
});

它有效，但仅适用于第一个元素，其余元素保持第一个“.caption”的高度。

谢谢!

编辑:

HTML 结构:

<div class="content">

    <div class="entry">
        <div class="post">...</div>
        <div class="caption">...</div>
    </div>

    <div class="entry">
        <div class="post">...</div>
        <div class="caption">...</div>
    </div>

    <div class="entry">
        <div class="post">...</div>
        <div class="caption">...</div>
    </div>

    <div class="entry">
        <div class="post">...</div>
        <div class="caption">...</div>
    </div>

</div>

更新:

我终于找到了解决办法:

$('.entry').each(function() {
    $(this).height( $(this).find('.post').height() + 80 );
});

我将“.entry”的溢出设置为隐藏。 '+ 80' 是因为 '.post' 的内边距为 40。

Answer 1

如果我理解的很好，你有很多帖子和很多标题，所以它应该是这样的

$('.post').each(function() {
  $(this).closest('.caption').css('height', $(this).height());
});

这可能不适用于 closest(取决于您的结构)，但您已经明白了。

编辑

来自你的更新

使用 next 而不是 closest

$('.post').each(function() {
    $(this).next('.caption').height($(this).height());
});