将clone()元素附加到其他clone()元素

Question

我尝试在用javascript创建的新元素之间添加Clone()元素，如下所示：

var $user_dp = $(this).parent().parent().find('.dp').clone()
var $user_name = $(this).parent().parent().find('.alias').clone()
var $feed_added = $(this).parent().parent().find('.timeago').clone()
var $feed_status =$(this).parent().parent().find('.feed_status').clone()

$('#pop_up_cont #wrap').html('<div>' + $user_dp + $feed_added + '</div><div>' + $feed_status + '</div>')

我得到的是[object Object][object Object][object Object]而不是元素。Link (点击汽车图片)

谢谢!

Answer 1

问题是因为您将对象附加到一个字符串，因此它被隐式地强制，从而产生一个[object Object]字符串。相反，您需要分别对对象执行append()操作。试试这个：

var $container = $(this).parent().parent(); // change to closest()

var $user_dp = $container.find('.dp').clone()
var $user_name = $container.find('.alias').clone()
var $feed_added = $container.find('.timeago').clone()
var $feed_status = $container.find('.feed_status').clone()

$('<div />').append($user_dp, $feed_added).appendTo('#wrap');
$('<div />').append($feed_status).appendTo('#wrap');

Answer 2

当您将字符串与元素连接起来时，对象将被转换为字符串，这将是"[object Object]"，因为toString方法没有特殊的重载来从元素创建HTML代码。

您可以创建可以附加的元素，而不是从将再次转换为元素的元素创建字符串：

var div1 = $('<div>').append([ $user_dp, $feed_added ]);
var div2 = $('<div>').append($feed_status);
$('#pop_up_cont #wrap').empty().append([ div1, div2 ]);

注意:如果您想替换内容(与html方法一样)，您应该首先使用empty()。如果想要在当前内容之后追加元素，可以省略empty调用。

Answer 3

因为你从.clone得到的东西都是object，而不仅仅是感叹的html。因此，您需要按如下方式对其进行append，而不是将其编写为html

$('#pop_up_cont #wrap').append('<div>'+$user_dp+$feed_added+'</div><div>'+$feed_status+'</div>')

更新

简而言之，你可以用一行来完成它，如下所示：

DEMO HERE

$('.cloneb').on('click',function(){
    $(this).parent().parent().find('.dp,.alias,.timeago,.feed_status').clone().appendTo('#pop_up_cont #wrap');
});