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

2023年11月17日 199次阅读

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

我有这样的事情. (简化的)

<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

最佳答案 你必须挂钩调整大小事件：

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

如果您希望它也在页面加载时触发,请自行触发调整大小事件：

$(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选择器.

点赞