Применить функцию jQuery к различным элементам для установки размеров

Question

Я использую jQuery и CSS для установки ширины и высоты для столбцов сетки и ее внутренних элементов.

Функция работает нормально, когда я применяю к контейнеру сетки с 2 столбцами (fiddle example) или сеткой с 3 столбцами (fiddle example) отдельно, но когда я пытаюсь объединить оба сценария, получите ширину блока от последнего загруженного элемента, который элементы 3 колонки сетки, как this example

Вот мой код:

HTML

<div class="container"> 
    <div class="grid-2cols full-img"> 
     <div class="col"> 
     <a class="full-block" href=""> 
     </a> 
     </div> 
     <div class="col"> 
     <a class="full-block" href=""> 
     </a> 
     </div> 
    </div> 
    <div class="grid-3cols full-img"> 
     <div class="col"> 
     <a class="full-block" href=""> 
     </a> 
     </div> 
     <div class="col"> 
     <a class="full-block" href=""> 
     </a> 
     </div> 
     <div class="col"> 
     <a class="full-block" href=""> 
     </a> 
     </div> 
    </div> 
</div> 

CSS

.container {width:80%; margin:0 auto;} 
.grid-2cols, 
.grid-3cols { 
    width:100% 
} 
.col { 
    float:left; padding:1%; border: 1px solid #eeeeee; 
} 
.grid-2cols .col { 
    width:43%; margin:2%; 
} 
.grid-3cols .col { 
    width:27%; margin:2%; 
} 
.full-block {background:#000; display:block;} 

JQuery

$(document).ready(function() { 
    var img_width, img_height, img_gap; 
    $(".grid-2cols.full-img").each(function() { 
     var e = $('.grid-2cols').find(".col").width(); 
     $(".full-block").each(function() { 
      MakeOverlay(e); 
     }); 
    }); 
    $(".grid-3cols.full-img").each(function() { 
     var x = $('.grid-3cols').find(".col").width(); 
     $(".full-block").each(function() { 
      MakeOverlay(x); 
     }); 

    }); 
    function MakeOverlay(e) { 
     $(".full-block").each(function() { 
      img_width = (Math.floor(e)); 
      img_height = (img_width * 0.56); 
      img_gap = (img_width * 0.56 * 0.62); 
      $(this).css({ 'height': img_height, 'width': img_width }); 
     }); 
    }; 

}); 

Скриншот

Вот что я пытаюсь достичь

Answer 1

Попробуйте выбрать .full-block один за другим, и передать их в MakeOverlay()

fullBlockEl = $(this).find('.full-block'); 
MakeOverlay(x, fullBlockEl);