요소의 높이를 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> 

UPDATE :

$('.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 (구조에 따라 다름)으로 작업하지만 아이디어를 얻었습니다. 당신의 갱신

대신 closest

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