使用 jQuery each 来抓取图像高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1273862/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using jQuery each to grab image height
提问by mothmonsterman
I have a bunch of images on a page. I'm trying to use jQuery to grab the height of each image and display it after the image. So here is my code:
我在一个页面上有一堆图像。我正在尝试使用 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>
[...]
My logic behind the jQuery is that I want to go through each "thumb" selector, assign the height of the img inside "thumb" to the variable "imageWidth", and then display the height in text after each "thumb".
我在 jQuery 背后的逻辑是，我想遍历每个“拇指”选择器，将“拇指”内 img 的高度分配给变量“imageWidth”，然后在每个“拇指”之后在文本中显示高度。
The problem I'm having is that it's only working on the first image and then quitting. I can get it to work if I use the "thumb_img" class, of course, but I need access to the height of the image for the "thumb" class.
我遇到的问题是它只能处理第一个图像然后退出。当然，如果我使用“thumb_img”类，我可以让它工作，但我需要访问“thumb”类的图像高度。
Hopefully this isn't too confusing as I'm fairly new to jQuery. Thanks advance.
希望这不会太令人困惑，因为我对 jQuery 还很陌生。先谢谢了。
回答by Rik Heywood
You won't be able to use document.ready() to do this as the images will not have loaded by the time that is called.
您将无法使用 document.ready() 来执行此操作，因为在调用时图像尚未加载。
You actually need to put this code into the onload() event handler, which is called after the document and all images have finished loading.
您实际上需要将此代码放入 onload() 事件处理程序中，该处理程序在文档和所有图像加载完成后调用。
It is only when the images have finished loading that the browser knows how big they are.
只有当图像加载完成时，浏览器才知道它们有多大。
回答by mothmonsterman
Use this:
用这个：
imageWidth = $(this).children("img").attr("width")
The following selects all your images:
以下选择您的所有图像：
$(".thumb img")
... so when you ask for the attribute it returns it from the first object in the collection
...因此，当您请求属性时，它会从集合中的第一个对象返回它
Sorry for all the edits... but it is best to reuse jquery objects, so:
抱歉所有的编辑...但最好重用 jquery 对象，所以：
var $this = $(this)
Then refer to $this were needed for optimization. Not that big a deal in this example, but it is a good practice to use.
然后参考 $this 进行优化。在这个例子中没什么大不了的，但使用它是一个很好的做法。
回答by FerrousOxide
$().ready(function() {
$(".thumb img").load(function() {
var imageHeight = $(this).height();
$(this).parent().append(imageHeight);
});
});
回答by Guillaume Bois
I have used something similar to preload an image and set some code in mouseover and mouseout and set the style for all images with a class name "swap". For me $(this)did not work but directly thisworked:
我使用了类似的东西来预加载图像并在 mouseover 和 mouseout 中设置一些代码，并为所有具有类名“swap”的图像设置样式。对我来说$(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/,'over');
//set the hover behaviour
this.onmouseover = function(){
this.src=this.src.replace(/([-_])out/,'over');
}
//set the out behaviour
this.onmouseout = function(){
this.src=this.src.replace(/([-_])over/,'out');
}
//set the cursor style
this.style.cursor="pointer";
});
}
