将值从一个元素复制到另一个

Question

I have two pairs of elements. First pair is .original , which contains child elements with each having specific font-size. The second is .copy with no font-size defined within it's child elements.

When a user clicks one of the .original elements it should copy the css font-size from it's children to the children of the .copy element with the same index. For example, if a user clicks first .original element the font-size value should be copyied to children of the first .copy element.

Currently i can only copy the last font-size value with the loop below.

 $('.original').click(function() { $(this).find('div').each(function(i) { font = $(this).css('font-size'); len = $(this).length; for (var i = 0; i < len; i++) { $('.copy div').css('font-size', font) } }) }) 

 div { display: inline-block; width: 100%; } div > div { display: inline-block; content: ""; width: 30px; height: 30px; float: left; } .original { background: #bbb; cursor: pointer; } .original > div { padding-right: 10px; } .copy { width: 100%; display: block; margin-top: 20px; clear: both; } .copy > div { font-size: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="t-1 original"> <div style="font-size: 14px">Test</div> <div style="font-size: 16px">Test</div> <div style="font-size: 18px">Test</div> </div> <div class="t-2 original"> <div style="font-size: 20px">Test</div> <div style="font-size: 22px">Test</div> <div style="font-size: 24px">Test</div> </div> <div class="t-1 copy"> <div>Test</div> <div>Test</div> <div>Test</div> </div> <div class="t-2 copy"> <div>Test</div> <div>Test</div> <div>Test</div> </div> 

Answer 1

You can do it like this:

 $('.original').click(function() { var original_divs = $(this).find('div'), index = $(this).index('.original'); $('.copy').eq(index).find('div').each(function(i) { $(this).css('font-size', original_divs.eq(i).css('font-size')); }); }) 

 /* Your original CSS */ div,div>div{display:inline-block}div{width:100%}div>div{content:"";width:30px;height:30px;float:left}.original{background:#bbb;cursor:pointer}.original>div{padding-right:10px}.copy{width:100%;display:block;margin-top:20px;clear:both}.copy>div{font-size:10px} 

 <!-- Your original HTML --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="t-1 original"> <div style="font-size: 14px">Test</div><div style="font-size: 16px">Test</div><div style="font-size: 18px">Test</div></div><div class="t-2 original"> <div style="font-size: 20px">Test</div><div style="font-size: 22px">Test</div><div style="font-size: 24px">Test</div></div><div class="t-1 copy"> <div>Test</div><div>Test</div><div>Test</div></div><div class="t-2 copy"> <div>Test</div><div>Test</div><div>Test</div></div> 

Answer 2

You can Try like this

 $('.original').click(function() { $('.'+$(this).data('target')).html($(this).html()); }) 

 div { display: inline-block; width: 100%; } div > div { display: inline-block; content: ""; width: 50px; height: 30px; float: left; } .original { background: #bbb; cursor: pointer; } .original > div { padding-right: 10px; } .copy { width: 100%; display: block; margin-top: 20px; clear: both; } .copy > div { font-size: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="t-1 original" data-target="t-1-paste"> <div style="font-size: 14px">Test</div> <div style="font-size: 16px">Test</div> <div style="font-size: 18px">Test</div> </div> <div class="t-2 original" data-target="t-2-paste"> <div style="font-size: 20px">Test</div> <div style="font-size: 22px">Test</div> <div style="font-size: 24px">Test</div> </div> <div class="t-1-paste"> <div>Test</div> <div>Test</div> <div>Test</div> </div> <div class="t-2-paste"> <div>Test</div> <div>Test</div> <div>Test</div> </div> 

Note: Added data-target attribute for paste target.