Question

我的图像基本上是无限量的。每个图像的尺寸都不同（并且随着视口大小的变化也会随着百分比动态变化），我需要每个图像的兄弟都匹配这些尺寸。

我已经让JQuery在控制台中打印每个图像的宽度，但我不确定如何将它应用到图像的兄弟div。此外，如果有某种方法可以观察视口大小的变化，那么即使调整窗口大小，也要确保兄弟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)
  });
});

CodePen： http://codepen.io/jonp/pen/yOrvwJ

提前致谢！

Answer 1

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

所以，使用next（），而不是最近的（）：

$(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

从具有相同类别的图像中抓取不同的高度和宽度并将其应用于他们的兄弟姐妹

1 个答案: