Each not encapsulating blocks

Question

I'm building a site that dynamically positions content in the middle of a group of sections.

Div with image background (Full width image - FWI)

Div with image background (of different height)

My problem is even with the each selector the first div is used to dictate the height to any other divs below it, I'm obviously missing something pretty basic

Jquery

jQuery(window).on("resize", function() {
  jQuery('.fwi').each(function() {
    jQuery('.image-outer').height(jQuery('.fwi-image').height());
  });
}).resize();


jQuery(".fwi-image img").load(function() {
  jQuery('.fwi').each(function() {
    jQuery('.image-outer').height(jQuery('.fwi-image').height());
  });
});

HTML

<div class="fwi">
    <div class="relative">      
          <div class="fwi-image full-width">
                <img width="1920" height="1080" src="">
          </div>  
          <div class="outer image-outer" style="height: 1080px;">
          my content which is dynamically positioned in the center vertically in my div
          </div>
   </div>
 </div>


<div class="fwi">
    <div class="relative">      
          <div class="fwi-image full-width">
                <img width="1920" height="1200" src="">
          </div>  
          <div class="outer image-outer" style="height: 1080px;">
         will take height from previous image-outer not its parent - it should be 1200
          </div>
   </div>
 </div>

Answer 1

Place this in you document.

function adjustImageOuterHeight () {
    var fwiImage = jQuery(this).parent(".fwi-image");
    var imageOuter = fwiImage.next(".image-outer");
    imageOuter.height(fwiImage.height());
}

jQuery(document).ready(function () {
    jQuery(".fwi-image img")
        .load(adjustImageOuterHeight)
        .each(function () {
            if (this.complete) adjustImageOuterHeight.call(this);
        });
});

jQuery(window).resize(function () {
    jQuery(".fwi-image img").each(adjustImageOuterHeight);
});

Loose any other jQuery stuff related to .fwi-image. And optionally loose your explicit call to .resize() on the window object.