Question

我网站上的所有图片都包含在div中，因此我可以为它们顶部的图像悬停效果添加一个遮罩。现在我需要将图像的宽度添加到其周围的div。

这就是我的HTML：

<div class="imagecontainer">
  <a href="/abc.php">
    <div class="imagebackicon"></div> <!-- ignore, its only for the image mask -->
    <div class="imagebackground"></div> <!-- ignore, its only for the image mask -->
    <img src="image.jpg" width="300" height="200" />
  </a>
</div>

我想将图像宽度“300”添加到其周围的div中。我通过这样做完成了这个：

$('.imagecontainer').width($(".imagecontainer").find('img').attr("width"));

问题是，此代码将第一个图像的宽度添加到我周围的所有图像div中。只要所有图像具有相同的尺寸，这都很好，但它们不会。

如果有人知道如何将图像宽度仅添加到其周围的div而不是所有图像div，那将会很棒。

Answer 1

要对所有图像/容器执行此操作，您需要迭代：

$('img').each(function(i, elem) {
    $(elem).closest('.imagecontainer').width($(elem).attr('width'));
});

或者相反：

$('.imagecontainer').each(function(i, elem) {
    $(this).width( $(this).find('img').attr('width') );
});

Answer 2

另一种方法是首先将宽度应用于容器div，使用相应值的数组，并将img设置为width:100%;

JS：

var img = [100,300,200,600]; 
$(".imagecontainer").each(function(i){
$(this).width(img[i]);
});

（如果在服务器端使用循环动态生成div，您可以考虑使用内联样式来设置从服务器接收的HTML上的容器宽度）

CSS：

img {
    width:100%;
}

如何将img属性添加到其周围的div元素中

2 个答案: