Question

如何使用某些元素复制对象？

我想复制这个对象，但每个elm仍然引用相同的DOM元素？

var fields = {
    account_id_ : {
        name : Lang.get('HDL_ACCOUNT'),
        width : 60,
        elm : $('<input class="inp" type="text" style="text-align:right" />'),
        value : '',
        focus : true
    },
    name : {
        name : Lang.get('HDL_NAME'),
        width : null,
        elm : $('<input class="inp" type="text" />'),
        value : ''
    }
};

Answer 1

我会参考John Resig的answer。简答：使用.extend（）

Answer 2

如果确实想要包含对DOM元素的引用，则必须：

使用$(...).get(0)以便树中只有DOM元素而不是jQuery对象
执行原始对象的深$.extend()
递归搜索副本以查找instanceof HTMLElement
将每个此类值转换为自身的.clone()

像（未经测试）的东西：

var fields = {
    account_id_ : {
        name : Lang.get('HDL_ACCOUNT'),
        width : 60,
        elm : $('<input class="inp" type="text" style="text-align:right" />').get(0),
        value : '',
        focus : true
    },
    ...
};

function cloneDOM(obj) {
    for (var key in obj) {
        if (Object.hasOwnProperty(key)) {
            var val = obj[key];
            if (val instanceof HTMLElement) {
                obj[key] = $.clone(val);
            } else if (val instanceof Object) {
                cloneDOM(val);
            }
        }
    }
}

var copy = $.extend(true, {}, fields);
cloneDOM(copy);

Answer 3

你可以只是loop through和.clone() jQuery对象（以及它引用的元素，在这种情况下是1。一个非常简洁的方法看起来像这样：

var fields2 = $.extend(true, {}, fields);
$.each(fields2, function(n, f) { f.elm = f.elm.clone(); });

现在fields2拥有自己的元素you can test it here，比较它不运行克隆线的to here，并引用/重新附加相同的元素，而不是第一个例子中的克隆。

为清楚起见，克隆循环的原始javascript版本看起来像like this：

for(var fieldName in newFields) {
    var field = newFields[fieldName];
    if(field .hasOwnProperty("elm"))
        field.elm = field.elm.clone();
}

用元素复制对象

3 个答案: