Question

也许这是一个非常愚蠢的问题，但对我来说并不愚蠢，因为我似乎无法解决这个问题（即使是谷歌）。

我有这个jquery：

$.each(items, function (key, t) {
  $("#list").append(
    $("<li />")
     .append($("<img />")
       .attr("src", "path/to/" + t.Thumbnail)
       .addClass("thumb"))
       .append($("<span />")
         .html("<b>" + t.Title + "</b><br />" + t.Description)));
});

在此之后，我通过拇指循环做一些造型（尺寸和比例，这里不相关）

$(".thumb").each(function () {
  console.log($(this));
});

在控制台中我看到了：

[img.thumb, context: img.thumb, jquery: "1.9.0", constructor: function, init: function,     
selector: ""…]
0: img.thumb
context: img.thumb
length: 1
__proto__: Object[0]

这是什么情境？使用$（this）.width（）时会出现错误或0.当我有一个已经在页面上的图像时，它只是......有效吗？！

所以，问题是：为什么这不起作用，为什么它在其他页面上起作用？

提前致谢

修改为Fiddle添加了一个示例： http://jsfiddle.net/nN9ce/

Answer 1

.width()获取元素的大小，而不是图像本身。当脚本运行时，尽管图像已添加到dom中，但它们尚未加载，因此元素的宽度为0（即使要加载到这些元素中的图像的宽度为128）。

您需要在加载图像后运行回调。

Answer 2

您尚未在图像上设置宽度和高度属性。尝试进行此更改：

.attr("src", "http://www.logoquizantwoorden.nl/wp-content/uploads/2012/06/Logo-Quiz-uitleg.png")
.attr("height", "128")
.attr("width", "128")
.addClass("thumb")

小提琴：http://jsfiddle.net/sBSnS/

Answer 3

不确定方法问题，但您可以使用属性

width

所以，你有这个。

$(".thumb").each(function () {
    console.log(this.width);
});

Answer 4

请改为尝试：

$(".thumb").each(function (idx, thumb) {
  console.log($(thumb)); 
   console.log($(thumb).width());
});

这是更新的小提琴：

http://jsfiddle.net/nN9ce/2/

选择器显示元素和上下文。无法获得元素

4 个答案: