CODEWITHSUNDEEP
jquerycss
user3052619
user3052619

Reputation: 29

Making the height of an element equal to a div

I am trying to make the height of '.caption' to be the same as '.post'.

The problem is that I have a lot of '.post' divs with different heights.

This is what I have:

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

It works but only for the first element, the rest of the elements remain with the height of the first '.caption'.

Thank you!

EDIT:

HTML Structure:

<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:

I finally found a solution:

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

I set the overflow of '.entry' to be hidden. The '+ 80' is because the '.post' has a padding of 40.

Upvotes: 0

Views: 49

Answers (1)

Rapha&#235;l Althaus
Rapha&#235;l Althaus

Reputation: 60493

If I understand well, you have many post and many caption, so it should look like

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

This may not work with closest (depending on your structure), but you've got the idea.

EDIT

From your update

use next instead of closest

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

Upvotes: 4

Related Questions