jquery 大师，jquery extend 没有克隆 dom 元素答案

【问题标题】：jquery gurus, jquery extend is not cloning the dom elementsjquery 大师，jquery extend 没有克隆 dom 元素
【发布时间】：2012-03-10 03:33:46
【问题描述】：

这里是jsfiddel：

class Overlay
    constructor: ->
      @header = $("<div> header</div>")
      @footer = $("<div> footer</div>")      
    get: ->
      @popup = $("<div></div>").append(@header).append(@footer)
      @popup.clone(true)

overlay = new Overlay
overlay_extend = {}    
$.extend(true,overlay_extend,overlay)
overlay_extend.header.append("<div>more header</div>")  
overlay.header.appendTo("body")

在 jsfiddle 中我更改了扩展的 dom 元素并更改了原始 dom..任何新想法。

【问题讨论】：

jQuery 只克隆普通对象或数组，但不克隆 DOM 元素（也可能不克隆 jQuery 对象）。 Here is the source.
我很确定 $.extend 并不适用于类的实例，尽管我在 DOCS 中找不到任何提及。文档只是提到原始类型没有扩展。此外，使用包含对 dom 元素引用的普通对象进行扩展将导致新对象包含对相同 dom 元素的引用，而不是那些 dom 元素的克隆。这是设计使然。
@KevinB - 你说的设计是什么意思..为什么会这样
jQuery.extend 方法的目的是将一个对象的内容合并到另一个对象中。它不会克隆对象，它会创建与其他对象具有相同属性的新对象，或者将一个对象的属性添加到现有对象。
@KevinB：extend 的常见用法是 var copy = $.extend(true, {}, oldObject);，它会克隆对象（尽管有原型）。

标签： jquery coffeescript

【解决方案1】：

extend 只克隆原生 JS 对象，而不是 DOM 元素。在这里，克隆出来的 jQuery 对象仍然指向原来的 DOM 元素。

您需要.clone() DOM 元素。

【讨论】：

我知道有克隆方法..我正在寻找克隆对象的解决方案，而不考虑 JS/Dom
没有内置任何东西，你必须自己写。
这不是标准的东西。或者我应该破解 jquery 中的扩展方法来检查它是否是 dom 调用克隆方法...我知道克隆方法工作得很好（也很深）
我不会破解$.extend，因为你可能会破坏其他代码——jQuery、插件等的其他部分。相反，编写你自己的函数。作为一般功能，您可以使用 jQuery 的extend 克隆 POJO，然后循环对象并检查每个元素是否有 .jquery，如果存在，则使用 clone。但是，这会很慢。最好将克隆方法添加到您的 Overlay 中，该方法克隆自身 (var r = $.extend({}, this))，然后设置 r.header = r.header.clone() 和 r.footer = r.footer.clone()，然后设置 return r。