jquery - 从具有相同类别的图像中获取不同的高度和宽度并将其应用于它们的 sibling

Question

我的图片数量基本上是无限的。每个图像的尺寸都不同(并且随着视口(viewport)大小的变化也会通过百分比动态变化)，我需要每个图像的同级图像来匹配这些尺寸。

我已经让 JQuery 在控制台中打印每个图像的宽度，但我不确定如何将它应用到图像的同级 div。此外，如果有某种方法可以监视视口(viewport)大小的变化，以确保同级 div 始终具有与图像相同的尺寸，即使在调整窗口大小时也是如此。

HTML:

<a class="shop-item">

  <img class="thumbnail"/>

  <div class="product-information">
  </div>

</a>

  <a class="shop-item">

  <img class="thumbnail"/>

  <div class="product-information">
  </div>

</a>

JQuery:

$(window).load(function() {
  $(".thumbnail").each(function() {
    var imgwidth = $(this).outerWidth();
    $(this).closest('.product-information').css('width', 'imgwidth');

    console.log(imgwidth)
  });
});

代码笔: http://codepen.io/jonp/pen/yOrvwJ

提前致谢!

Answer 1

除了评论中提到的问题，你需要另一个选择器/方法，

所以，使用 next()，而不是 closest():

$(window).load(function() {
  $(".thumbnail").each(function() {
    var imgwidth = $(this).outerWidth();
    $(this).next('.product-information').css('width', imgwidth+'px');

    console.log(imgwidth)
  });
});

演示:http://codepen.io/anon/pen/BKEYXX