How to assign all attributes of one div to another div

Question

I need to assign the position, top, left, height, width & border of one div to another div. Since I have multiple div's that I need to operate upon, I am looking for an elegant solution to this using jQuery.

Kindly keep in mind that the two div's have different ID's and I'd like to keep it that way.

Thanks in advance & best regards, sbguy

possible duplicate http://stackoverflow.com/questions/754607/can-jquery-get-all-css-styles-associated-with-an-element — matino, Dec 21 '11 at 13:13
You can use css classes, they were made for that... (btw, ID **must** be different, it's not a choice ;-)) — Didier Ghys, Dec 21 '11 at 13:13
I made you a function, but i can't be arsed to document it: http://jsfiddle.net/qQHqU/ — Andreas Eriksson, Dec 21 '11 at 13:27

score 1 · Answer 1 · answered Dec 21 '11 at 13:15

1

use .clone()
http://api.jquery.com/clone/

answered Dec 21 '11 at 13:15

Андрей Петров

149
4

Won't that clone the Id as well? – Deleteman Dec 21 '11 at 13:16
You can modify the id after cloning. – Chibuzo Dec 21 '11 at 13:25
$('#div1').clone().attr('id','id_div2').appendTo('place_you_want') – Андрей Петров Dec 21 '11 at 13:28

score 1 · Answer 2 · answered Dec 21 '11 at 13:18

1

It may be more work in the short term, but in my experience using classes is the best long term solution for this kind of work.

Not using them gets messy pretty quick.

answered Dec 21 '11 at 13:18

Tom Hubbard

15,820
14
59
86

score 1 · Answer 3 · answered Dec 21 '11 at 13:23

Consider using .clone function.

$("div-selector").clone();

You can immediately position it to where you want. E.g

 $("div-selector").clone().appendTo("where-you-want-it");

You can optionally stuff it in a variable and you can also modify the cloned elements or their content.

score 0 · Answer 4 · answered Dec 21 '11 at 13:17

Can you not just add a class to the element in question? If not, how about something like this:

function cloneCSS(source, receiver){
    var cssObj = {
            position: source.css('position'),
            top: source.css('top'),
            left: source.css('left'),
            height: source.css('height'),
            width: source.css('width'),
            border-top-width: source.css('border-top-width'),
            border-top-width: source.css('border-top-style'),
            border-top-width: source.css('border-top-color'),
            border-bottom-width: source.css('border-bottom-width'),
            border-bottom-width: source.css('border-bottom-style'),
            border-bottom-width: source.css('border-bottom-color'),
            border-left-width: source.css('border-left-width'),
            border-left-width: source.css('border-left-style'),
            border-left-width: source.css('border-left-color'),
            border-right-width: source.css('border-right-width'),
            border-right-width: source.css('border-right-style'),
            border-right-width: source.css('border-right-color'),
    };

    receiver.css(cssObj);
}

Annoying that you have to set all those border properties individually, but that's the way it goes. The good thing about creating an object like this and then applying it in the css() method is that you only have to call that method once, so you are only modifying the DOM once.

How to assign all attributes of one div to another div

4 Answers4