javascript - jQuery append 后没有图像尺寸

Question

我有以下代码，它循环获取表中的所有图像，然后将它们 append 到#featured，然后将其 append 到#wrapper。问题是在所有内容都 append 到 #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 对象；然后你对它做了一些事情，然后把它——以及你对它所做的——扔掉。结果是您最终 append 了一个空的 <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">不是这样的事。如果您将其 append 到 #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 对象。迭代。第一种方法要好得多。