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 对象；然后你对它做了一些事情，然后把它——以及你对它所做的——扔掉。结果是您最终将一个空的

附加到 #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/ambigously/PXVG2/< /a>

一遍又一遍地执行 $(x).append(...) 将会起作用，前提是 x 已经存在于 DOM 中；你的

不是这样的。如果您首先将其附加到 #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/ambigously/vPyy6/

后一种方法相当不错虽然很浪费，但它在每次 .each 迭代中创建一个新的 jQuery 对象。第一种方法要好得多。