jQuery追加后没有图像尺寸

Question

我有以下代码，循环以获取表中的所有图像然后将它们附加到#featured ，然后将其附加到#wrapper 。 问题是在将所有内容附加到#wrapper ，图像没有尺寸，因此不显示它们。 就像图像的宽度和高度为0px一样。 我如何克服这个尺寸问题。

var featured = '<div id="featured"></div>';
$('#imageTable tbody tr td img').each(function(){
    $(featured).append('<img src='+$(this).attr("src")+' />');
});
$(featured).appendTo('#wrapper');

我试着通过这样做来解决这个问题

$(featured).load(function(){
    $(this).appendTo('#wrapper');
});

但这不起作用。

Answer 1

你的问题是，每当你说$(featured) ，你就会创建一个全新的jQuery对象; 然后你做了一些事情然后把它扔掉 - 以及你对它做了什么 - 离开了。 结果是你最终将一个空的<div id="featured">附加到#wrapper ：图像没有尺寸，它们根本就不存在。

创建一个jQuery对象并继续使用该对象：

var $featured = $('<div id="featured"></div>');
$('#imageTable tbody tr td img').each(function(){
    $featured.append('<img src='+$(this).attr("src")+' />');
});
$featured.appendTo('#wrapper');

演示： http ： //jsfiddle.net/ambiguous/PXVG2/

如果x已经在DOM中，那么反复执行$(x).append(...)将会起作用。 你的<div id="featured">不是这样的。 如果你首先将它附加到#wrapper并且#wrapper在DOM中，那么如果你使用#featured而不是HTML它会工作正常：

var featured = '<div id="featured"></div>';
$(featured).appendTo('#wrapper');
$('#imageTable tbody tr td img').each(function(){
    $('#featured').append('<img src='+$(this).attr("src")+' />');
});

演示： http ： //jsfiddle.net/ambiguous/vPyy6/

后一种方法相当浪费，它在每个.each迭代上创建一个新的jQuery对象。 第一种方法要好得多。