Получите высоту div и примените ее к элементу в div

Question

Кажется, что это должно быть очень просто, и я прочитал много документации, но не могу найти ответа.

У меня есть несколько вложенных div, и я хочу получить высоту каждого div на странице и применить его к каждому другому div, являющемуся дочерним элементом.

Мне нужно получить контейнер для каждого журнала-изображения и применить его к заголовку каждого журнала. На странице есть несколько экземпляров, поэтому лучше всего использовать инструкцию each().

Вот мой 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

Answer 1

Кратчайший решение, которое я мог думать:

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

конечно, вы могли бы объединить линии, как это, но это, мол, меньше эффективны, если у вас 1000 бонусов. Если у вас меньше ста, разница невелика:

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