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).append(...)一遍又一遍地将努力提供x的东西是已经在DOM;你的<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/

这后一种方法是相当浪费，虽然，它会在每个迭代中创建一个新的jQuery对象。第一种方法好得多。