jQuery在追加新元素之前填充内容

Question

我正在尝试使用数据填充featured，然后将其附加到#wrapper。这不适合我。我做错了什么？

var featured = '<div id="featured"></div>';
$('#imageTable tbody tr td img').each(function(){
    $(featured).append($(this).attr('src'));
});
$(featured).appendTo('#wrapper');

Answer 1

var $featured = $('<div id="featured"></div>');
$('#imageTable tbody tr td img').each(function(){
    $featured.append($(this).attr('src')).append('<br />');
});
$featured.appendTo('#wrapper');

阐释：

当你在循环$(featured)中执行此操作时，它会为每个选定元素创建一个NEW div，因此只有最后一个div会附加到#wrapper。您需要在each循环之外创建jQuery对象。

Answer 2

这是因为你在循环中有$(featured)调用。你只想打电话一次。

试试这个：

var $featured = $('<div id="featured"></div>');
$('#imageTable tbody tr td img').each(function(){
    $featured.append($(this).attr('src'));
});
$featured.appendTo('#wrapper');

Answer 3

与Bryan Ross非常相似，只是以更有效的方式创建div。它可能不那么直截了当，但我相信它更具性能。

var $f = $('<div>',{id:'featured'});
$('img,#imageTable > td').each(function(i){
    $f.append($(this).attr('src');
})
$f.appendTo('#wrapper');