将jQuery函数应用于不同的元素以设置尺寸

Question

我正在使用jQuery和CSS来设置网格列及其内部元素的宽度和高度。

功能工作正常时，我适用于网格容器2列（ 小提琴例子 ）或栅格3列（ 小提琴例如 ）单独地但是当我尝试结合两种脚本获得从作为3最后加载的元件块宽度像这样的列网格元素

这是我的代码：

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选择.full-block ，然后将它们传递给MakeOverlay()

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