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

Question

我正在使用一个幻灯片脚本，它需要每个图像的尺寸才能正常工作。客户还需要添加大约 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>

这些图像具有不同的宽度，但高度相同。

Answer 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());
    });

});

Answer 2

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

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

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

剩下的事情就非常简单了。使用 jQuery API 文档了解更多信息。

Answer 3

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