CODEWITHSUNDEEP
jqueryheighteach
John the Painter
John the Painter

Reputation: 2615

Get height of div and apply it to element within div

This seems like it should be very easy, and I've read a lot of the documentation, but can't seem to find an answer.

I have some nested divs, and I want to get the height of each div on the page and apply it to each of another div that's a child element.

I need to get the each-journal-image-container and apply it to each-journal-image-caption. There's multiple instances of this on the page, so an each() statement would best.

Here's my 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>

Cheers, R

Upvotes: 2

Views: 198

Answers (3)

Samuel Liew
Samuel Liew

Reputation: 79022

Shortest solution I could think of:

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

of course, you could combine the lines like this, but it's supposedly less efficient if you have 1000's of divs. If you have less than a hundred, the difference is negligible:

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

Upvotes: 4

Robert Fricke
Robert Fricke

Reputation: 3643

You would do this like so:

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

Upvotes: 0

MarcinWolny
MarcinWolny

Reputation: 1645

use height() attribute. It can be used to both: get the height and set the height of element.

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

Upvotes: 1

Related Questions