为什么jquery clone只克隆父元素而不是其子元素？

Question

I´ve a parent div withs its child like this:

<div id="padre" class="demo">
 <ul id="sortable1" class="droptrue ui-sortable">
  <li id="app1" class="ui-state-default toolTip">
   <div id="00" class="AppPadre"></div>

所以当我用下一行克隆我的父div时：

var $copia = $('#padre>*').clone();

当我打印我的克隆变量时，它只显示：

<div id="padre" class="demo">
 <ul id="sortable1" class="droptrue ui-sortable">

有人知道为什么只复制了前两层吗？谢谢。 在复制后，我正在使用$('#padre>*').remove(); 删除“ padre”的所有子元素，它确实删除了所有子元素，但是当我执行append时，它只会添加“ padre”的第一个子元素。

- linker85

---

你想克隆什么？ $('#padre>*') 会克隆它所有的子元素。 - Selvakumar Arumugam

你的意思是要执行 var $copia = $('#padre').clone(); 吗？ - amit_g

当给定适当的HTML时，您的.clone()语句似乎工作正常。请参见这个工作的jsFiddle：http://jsfiddle.net/jfriend00/Sja7Z/。如果您正在尝试做一些不同的事情，则必须更好地解释您的问题。 - jfriend00

我正在尝试克隆所有子元素，然后当我调整浏览器大小时，我会删除父元素的所有子元素；当我回到原始分辨率时，我会将副本附加上去。 - linker85

Answer 1

您没有正确关闭标签：

<div id="padre" class="demo">

     <ul id="sortable1" class="droptrue ui-sortable">
        <li id="app1" class="ui-state-default toolTip"><li>
     </ul>

    <div id="00" class="AppPadre"></div>

</div>

http://jsfiddle.net/E8uJm/

---

编辑：请尝试以下操作：

$('#padre').children().clone();
$("#clone").append($copia);
$('#padre').remove();

http://jsfiddle.net/E8uJm/2/

- Ram

---

这很可能是问题所在，除非 OP 没有向我们展示实际的 HTML。.clone() 会克隆整个树，而不仅仅是部分内容。 - jfriend00

@jfriend00 我不认为是这样的.. 他只是在分享他的代码片段。例如：肯定有更多的<li>，所以ul和li的结束部分是缺失的。 - Selvakumar Arumugam

@Vega - 你有其他的解释吗？只要使用正确的HTML，OP的代码就可以正常工作。在这里查看jsFiddle：http://jsfiddle.net/jfriend00/Sja7Z/ - jfriend00

如果页面的 DOCTYPE 是 XHTML Strict，这种标记在 IE 中存在问题。 - Ram

实际上，我已经关闭了它，只是在示例中没有放置闭合标签。但还是谢谢你的建议。 - linker85

Answer 2

试试这个：

var $copia = $('#padre>*').clone(true, true);

- Uchenna Nwanyanwu

---

.clone() 方法的两个参数仅控制数据和事件的克隆，不影响对象本身的克隆。clone() 方法始终是深度克隆。请参阅 jQuery 文档 进行解释。 - jfriend00

克隆已经执行了深度克隆。这两个参数是用于克隆事件和数据的。 - amit_g