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) 中执行此操作时，它会为每个选定元素创建一个新的 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');