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に追加してしまうことになります。画像に寸法がなくなることはありません。まったく存在しません。

1つのjQueryオブジェクトを作成し、使用し続けるその1つのオブジェクト：

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にあった場合は、代わりにHTMLの#featuredを使用した場合、それは大丈夫うまくいく：

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オブジェクトを作成します。最初のアプローチははるかに優れています。