使用 jQueryeach 获取图像高度

Question

我的页面上有一堆图像。我正在尝试使用 jQuery 来获取每个图像的高度并将其显示在图像之后。这是我的代码：

---

$(document).ready(function() {
  $(".thumb").each(function() {
    imageWidth = $(".thumb img").attr("width");
    $(this).after(imageWidth);
  });
});


<div class="thumb"><img src="" border="0" class="thumb_img"></div>
<div class="thumb"><img src="" border="0" class="thumb_img"></div>
<div class="thumb"><img src="" border="0" class="thumb_img"></div>


 [...]

---

我的 jQuery 背后的逻辑是，我想遍历每个“thumb”选择器，将“thumb”内的 img 的高度分配给变量“imageWidth”，然后在每个“thumb”之后以文本形式显示高度。

我遇到的问题是它只适用于第一张图像，然后退出。当然，如果我使用“thumb_img”类，我可以让它工作，但我需要访问“thumb”类的图像高度。

希望这不会太令人困惑，因为我对 jQuery 还很陌生。提前致谢。

Answer 1

您将无法使用 document.ready() 来执行此操作，因为在调用时图像尚未加载。

实际上，您需要将此代码放入 onload() 事件处理程序中，该处理程序在文档和所有图像加载完成后调用。

只有当图像加载完成时，浏览器才知道它们有多大。

Answer 2

使用这个：

imageWidth = $(this).children("img").attr("width")

以下选择您的所有图像：

$(".thumb img")

...所以当您请求该属性时，它会从集合中的第一个对象返回该属性

抱歉所有编辑...但最好重用 jquery 对象，因此：

var $this = $(this)

然后参考 $this 是优化所需要的。在这个例子中没什么大不了的，但这是一个很好的使用习惯。

Answer 3

$().ready(function() {

        $(".thumb img").load(function() {
            var imageHeight = $(this).height();
            $(this).parent().append(imageHeight);

        });

});

Answer 4

我使用了类似的方法来预加载图像，并在鼠标悬停和鼠标移出中设置一些代码，并为所有具有类名“交换”的图像设置样式。对我来说 $(this) 不起作用，但直接 this 起作用：

// in jquery
$(document).ready(function(){
        swapAndPreload();
    });

function swapAndPreload(){
    $(".swap").each(function(){
        // preload images in cache
        var img = new Image();
        img.src=this.src.replace(/([-_])out/,'$1over');
        //set the hover behaviour
        this.onmouseover = function(){
            this.src=this.src.replace(/([-_])out/,'$1over');
        }
        //set the out behaviour
        this.onmouseout = function(){
            this.src=this.src.replace(/([-_])over/,'$1out');
        }
        //set the cursor style
        this.style.cursor="pointer";
    });
}