Copy selected CSS style between DIVs by jQuery

Question

I want to copy some CSS styles form one DIV, to another DIV.

Click on the "ONE" DIV
Then jQuery read list of CSS properties from ARRAY
Then copy these properties from DIV "ONE" to DIV "TWO".

This is my attempt, but it does not work. What's wrong with it?

HTML

 <div class="one">Click HERE on this DIV, to TRANSFER CSS properties From this ONE</div>
 <div class="two">To this TWO</div>

CSS

* {
   background-color:gray;
}
.one {
   color: red;
   font-size:12px;
   width: 100px;
   height: 100px;
   background-color: white;
   margin: 20px;
   padding: 20px;
   font-weight: bold;
}
.two {
   font-size:20px;
   color: blue;
   width: 200px;
   height: 200px;
   background-color: yellow;
   margin: 20px;
   padding: 20px;
}

jQuery

 $(document).ready(function(){
     $("div.one").click(function(){
         var $array = ['color','width','height', 'background-color', 'font-weight', 'font-size'];
         $(this).each( $array , function(item, value){
             $("div.two").css(value, $(this).css(value));
         });
     });
 });

Rob W · Accepted Answer · 2012-04-15 09:44:07Z

4

Select jQuery at the left panel of JSFiddle.
Use $.each(array, fn) instead of $().each(array, fn).
Store $(this) in a variable, eg $this = $(this). Inside the loop, this refers to the array element, not to the DOM element which is clicked.
(non-critical) Do not prefix non-jQuery objects with a $.

Demo: http://jsfiddle.net/meU9M/2/

$(document).ready(function(){
    $("div.one").click(function(){
        var array = ['color','width','height', 'background-color', 'font-weight', 'font-size'];
        var $this = $(this);
        $.each( array , function(item, value) {
            $("div.two").css(value, $this.css(value));
        });
    });
});

answered Apr 15, 2012 at 9:44

Rob W

350k87 gold badges811 silver badges683 bronze badges

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

Collectives™ on Stack Overflow

Copy selected CSS style between DIVs by jQuery

1 Answer 1

Demo: http://jsfiddle.net/meU9M/2/

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Demo: http://jsfiddle.net/meU9M/2/

Comments

Your Answer

Sign up or log in

Post as a guest

Related