jQuery在浏览器调整大小时获取多个元素的动态宽度

Question

标题几乎可以解释我的大部分问题。我将提供一些背景信息。

我有这样的东西。（简体）

<ul>
<li><img src="image1.jpg"/></li>
<li><img src="image2.jpg"/></li>
<li><img src="image3.jpg"/></li>
</ul>

每个li水平平铺。像这样：

 [   ][   ][   ][   ]

所以我已经有了这个脚本，可以拉伸图像高度并保持宽高比。但是现在我需要一个脚本，即使在调整浏览器大小之后，该脚本也将动态获取所有图像（或li）的宽度。据我了解，我需要诸如事件冒泡或某种形式的委派之类的东西。我不知道如何继续这个jQuery旅程。

图片链接到我正在谈论的不同浏览器设置

正常浏览器高度

http://f.cl.ly/items/1O3w3M3l3b3a0z2B0U1w/image1.jpg

降低浏览器高度

http://f.cl.ly/items/3y3K38243J063J1U2f1P/image2.jpg

Answer 1

你必须加入该resize事件：

$(window).resize(function(){
    $('li img').each(function(){
        console.log( $(this).width() );
    });
});

如果您希望它也在页面加载时触发，请resize自行触发该事件：

$(window).resize(function(){
    $('li img').each(function(){
        console.log( $(this).width() );
    });
})
.resize();

这是小提琴：http://jsfiddle.net/39JFQ/

如果您需要所有宽度的总和，请使用：

$(window).resize(function(){
    var totalWidths = 0;

    $('li img').each(function(){
        totalWidths += $(this).width();
    });

    console.log(totalWidths);
})
.resize();

这是小提琴： http: //jsfiddle.net/39JFQ/2/

显然，您应该li img用更具体的内容替换选择器。