Question

我有以下HTML结构：

<div id="container">
     <div class='label-item-text drag' data-type='text'>
         <div>Right click on me and check the HTML of the duplicated</div>
     </div>
</div>

我正在尝试复制#container中的项目。不幸的是，我没有按照预期工作。

A）我的代码复制了里面的所有项目，实际上我只选了一个

B）我无法正确复制

复制所有项目的代码如下。

$('#container').append($dragRightClick.parent().html());

嗯，parent()的{{1}}是$dragRightClick，所以我理解它复制所有项目的原因......

我要复制的内容只是#container内的div，表示：

#container

但到目前为止我所得到的只是：

<div class='label-item-text drag' data-type='text'>
    <div>Right click on me and check the HTML of the duplicated</div>
</div>

以下代码输出上述代码：

<div>Right click on me and check the HTML of the duplicated</div>

您可以查看完整问题 in JSFiddle 。

Answer 1

你应该使用

$('#container').append($dragRightClick.clone());

而不是：

$('#container').append($dragRightClick.parent().html());

请参阅updated JSFiddle

Answer 2

为此目的使用outerHTML：

替换：

$('#container').append($dragRightClick.parent().html());

使用：

$('#container').append($dragRightClick[0].outerHTML);

UPDATED FIDDLE

您还可以使用为outerHTML编写的此jquery插件：

http://css-tricks.com/snippets/jquery/outerhtml-jquery-plugin/

jQuery里面的重复项目

2 个答案:

UPDATED FIDDLE