我可以使用 Jquery 查找然后设置图像的宽度吗？答案

【问题标题】：Can I use Jquery to find and then set the width of an image?我可以使用 Jquery 查找然后设置图像的宽度吗？
【发布时间】：2011-10-26 03:44:31
【问题描述】：

我使用的幻灯片脚本需要每个图像的尺寸才能正常工作。客户还必须添加大约 50 多张图像。

有没有我可以使用的脚本来查找 ID 为“scroller”的无序列表中所有图像的宽度，然后像在图像标签中设置宽度一样设置宽度？

如果有人可以帮我写它，并可能解释每个部分的作用，我将不胜感激。

如果您正在寻找代码，这里就是。

在 JQuery 代码之前。

<ul id="scroller">
<li><img src="image.jpg"></li>
<li><img src="image.jpg"></li>
<li><img src="image.jpg"></li>
<li><img src="image.jpg"></li>
</ul>

在 JQuery 代码之后。

<ul id="scroller">
<li><img src="image.jpg" width="100"></li>
<li><img src="image.jpg" width="350"></li>
<li><img src="image.jpg" width="70"></li>
<li><img src="image.jpg" wudth="250"></li>
</ul>

图像的宽度不同，但高度相同。

【问题讨论】：

为什么不直接设置高度呢？如果您将宽度设为自动，它将自行确定宽度。

标签： jquery width

【解决方案1】：

是的，你可以。真的很直观。

$('image selector').width(); //to access width
$('image selector').width(N); //to set width to Npx.

为了遍历所有这些，您将使用.each()。

$('#scroller img').each(function() {
    //Do stuff width each image. $(this).
}

您可能想知道您可以获取现有宽度并设置它，但只能在元素完全加载后进行。这可能会在较旧的浏览器上引起一些跳跃，因此隐藏图像，获取现有尺寸，进行转换，然后同时将它们全部淡入或类似的东西是值得的。谢谢@Whetstone

$(function() {

    $('#scroller img').each(function() {
        $(this).attr('width', $(this).width());
    });

});

【讨论】：

您可能想澄清一下，您可以抓取现有宽度并设置它，但只能在元素完全加载后进行。这可能会在较旧的浏览器上引起一些跳跃，因此隐藏图像，获取现有尺寸，进行转换，然后同时将它们全部淡入或类似的东西是值得的。跨度>
@Truth，我理解你的代码，谢谢。不过，我对如何将其构建为完整的代码来遍历我的所有图像感到有些困惑。你能帮忙吗？
我不完全理解你想要达到的目标，你是如何设置宽度的？以什么标准。 @瑞安
@Truth 我需要找到每个图像的宽度然后设置它，而不是在图像标签中手动设置每个图像。

【解决方案2】：

$('#scroller img').each(function(){
var t=$(this);
    t.load(function(){
        t.attr('width', t.attr('width'));
    });
});

.each 滚动浏览#scroller ul 中的所有图像。

jQuery 只能在完全加载后才能获取图像的宽度，因此.load。

剩下的就很简单了。使用jQuery API 文档了解更多信息。

【讨论】：

【解决方案3】：

$('#scroller').find('img').each(function() {
   // $(this).width()
   // Implement your stuff
});

【讨论】：