jQuery 更改图像大小和包含的 Div

Question

我有一个图像包装 div 来包含图像和标题。

使用以下内容，图像包装器 div 的大小设置为图像的宽度：

$('.imgright').each(function(){
    $(this).width($(this).find('img').outerWidth());
});

如果依赖于父 div 类，我还希望使用不同的图像路径。以下方法有效：

$('.grid_12').each(function(){
    $(this).find('img').each(function(){
        $(this).attr("src", $(this).attr('src').replace('/StandardImage/','/MidSizeImage/')); 
    });
});

但是将它们放在一起并不总是可以设置图像包装器 div 的宽度。

$('.grid_12').each(function(){
    $(this).find('img').each(function(){
        $(this).attr("src", $(this).attr('src').replace('/StandardImage/','/MidSizeImage/')); 
    });
});
$('.imgright').each(function(){
    $(this).width($(this).find('img').outerWidth());
});

有什么建议吗？

感谢 2 个非常快速的答案，我已经重组了我的代码并使用 .load() 函数来获取更改后的图像详细信息。

工作代码是：

$('.grid_12').each(function(){
   $(this).find('img').each(function(){
     $(this).attr("src", $(this).attr('src').replace('/StandardImage/','/MidSizeImage/')); 
     $(this).load(function(args){
       var newWidth = $(this).outerWidth();
       $(this).parent('.imgright').each(function(){
         $(this).width(newWidth);
       })
     })
   })
});

Answer 1

会不会是图片还没加载呢？
您可以在更改 ImagePath 时向图像添加加载处理程序

$('.grid_12').each(function(){
  $(this).find('img').each(function(){
    $(this).attr("src", $(this).attr('src').replace('/StandardImage/','/MidSizeImage/')); 
    $(this).load(function(args){/* find the parent div and change size */});
  });
});

Answer 2

对于初学者来说，您可以利用链接使您的代码更加简洁：

$('.grid_12').each(function(){
    $(this)
        .find('img')
            .each(function(){
                $(this)
                      .attr("src", $(this).attr('src').replace('/StandardImage/','/MidSizeImage/')); 
            })
            .end()
        .width($(this).find('img').outerWidth());
});

现在，对于您的问题，发生的情况是您正在加载图像（通过更改它的 src），然后立即尝试获取其尺寸，而不首先检查查看图像是否已完成加载。

看起来这个问题可能会帮助您走向正确的方向：

如何使用 Javascript/jQuery 确定图像是否已加载？