g5wx g5wx - 4 years ago 81
HTML Question

Javacript - copy value from one element to another

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 Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download