Cloning javascript objects maintaining id

Question

I'm trying to clone objects to a JQuery dialog.
I succeeded in moving the objects to their destination area, by using append, however that also removed my original objects. The objects also have a function which sets their style when hovered and clicked on. That function uses the id of the object to set the style, so in this case the id of the cloned objects need to be a duplicate of the original ones.

This way the original objects are moved, but not cloned:

var lv_Parts = document.getElementById("DefaultPart");  // An area where my original 'parts' are
var lv_PartArea = $('<div class="PartWnd"/>');          // The new are for the parts, which is located in a JQuery dialog
lv_PartArea.html(lv_Parts.childNodes);                  // Adding the childNodes of the original partarea, which are parts
lv_CalcWindow.append(lv_PartArea);                      // Adding the parts to the new part area in the JQuery dialog

I tried cloning them but it didn't work:

var lv_Parts = $('DefaultPart');
var lv_PartArea = $('<div class="PartWnd"/>');
lv_PartArea.append(lv_Parts.children().contents().clone());
lv_CalcWindow.append(lv_PartArea);

How can I achieve this?

EDIT
These are the setStyle functions, I also changed lv_obj to the class name. It now lights up all the objects using the class 'Part'.

function Part_setStyle(pm_col, pm_id) {
    var lv_obj;
    if (!pm_id) {
        lv_obj = ".Part";
    } else {
        lv_obj = pm_id;
    }
    $(lv_obj).css("background-color", pm_col);
}

function Part_onHoverIn(pm_this, pm_event) {
    this.setStyle("rgb(135, 206, 250)");
}

function Part_onHoverOut(pm_this, pm_event) {
    if (this.Selected == false) {
        this.setStyle("rgb(220, 197, 220)");
    }
}

When I use class, with an onHover or onClick, all the objects with the same class will light up at that moment. I only need one object to be highlighted at a time. — Stefan Orie
– Stefan Orie, Commented Nov 6, 2013 at 15:42
You are wrong about When I use class, with an onHover or onClick, all the objects with the same class will light up at that moment. I only need one object to be highlighted at a time., this/$(this) targets to the current element. — The Alpha
– The Alpha, Commented Nov 6, 2013 at 15:43
@StefanOrie - you don't show your hover or click functions, but they probably need to use this to operate only on the item causing the event. — jfriend00
– jfriend00, Commented Nov 6, 2013 at 15:43

Wagner Leonardi · Accepted Answer · 2013-11-06 16:08:53Z

1

To select an object by class: instead this $('<div class="PartWnd"/>') use this $(".PartWnd")

To select an object by id: instead this $('DefaultPart') use this $('#DefaultPart')

How your code should be:

var lv_Parts = $('#DefaultPart');
var lv_PartArea = $('.PartWnd');
lv_PartArea.append(lv_Parts.children().contents().clone());
lv_CalcWindow.append(lv_PartArea);

First of all, objects with the same id is wrong, use class instead . Ids must be unique, because javascript and browser could have problems with objects with the same id, so keep this in your mind. If your code will work I don't know, I don't know what's lv_CalcWindow for eg., but here's a small example about cloning:

Clonning a div:

 $("#div1").append($("#div2").clone());

Cloning a div and changing id to avoid duplicated ids:

 $("#div1").append($("#div2").clone().attr('id', 'div3'));

edited Nov 6, 2013 at 16:08

answered Nov 6, 2013 at 15:59

Wagner Leonardi

4,4662 gold badges39 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Cloning javascript objects maintaining id

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related