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

Question

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

当我分别应用于具有 2 列(fiddle example)的网格容器或具有 3 列(fiddle example)的网格容器时，该函数工作正常，但是当我尝试组合这两个脚本时，从上次加载的脚本中获取 block 宽度元素是 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);