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(...)已经存在于DOM中，那么反复执行x将会有效。你的<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对象。第一种方法要好得多。

jQuery追加后没有图像尺寸

1 个答案: