Question

how to copy an object with some elements?

I want to copy this object, but each elm still refers to the same DOM element?

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

You can just loop through and .clone() the jQuery object (and the elements, 1 in this case, that it references. A very concise method would look like this:

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

Now fields2 has it’s own elements, you can test it here, compare it to here which doesn’t run the clone line, and references/re-appends the same elements, instead of clones in the first example.

For clarity, a raw javascript version of the clone loop would look like this:

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