使用jQuery来获取图像高度

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背后的逻辑是,我想通过每个"拇指"选择器,将"拇指"内的img的高度分配给变量"imageWidth",然后在每个"拇指"后显示文本中的高度.

我遇到的问题是它只在第一张图像上工作然后退出.如果我使用"thumb_img"类,我可以让它工作,但我需要访问"thumb"类的图像高度.

希望这不是太混乱,因为我是jQuery的新手.谢谢你.

    

Answer 1

您将无法使用document.ready()来执行此操作,因为图像在调用时不会加载.

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

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

Answer 2

用这个:

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

以下选择您的所有图像:

$(".thumb img")

...所以当你要求属性时,它会从集合中的第一个对象返回它

抱歉所有的编辑...但最好重用jquery对象,所以:

var $this = $(this)

然后参考$这是优化所需要的.在这个例子中没什么大不了的,但这是一个很好的做法.