jquery - Take data from one div and insert into another section of page -
what best solution ... want take 3rd content div's image filename, link, , text), , duplicate first entry in old section. duplicating data contents, using div structure old section. differences in structure can see image path (one using featured, , other being boxart), , imgframenew , posterimage div.
if need me clarify let me know little abstract, , difficult me describe in writing.
<div class="new"> <div class="content"><div class="imgframenew"> <div class="posterimage" style="background:url(/media/images/featured/pic1.jpg);"></div></div> <div class="title"><a rel="/media/link1/">example 1</a></div></div> <div class="content"><div class="imgframenew"> <div class="posterimage" style="background:url(/media/images/featured/pic2.jpg);"></div></div> <div class="title"><a rel="/media/link2/">example 2</a></div></div> <div class="content"><div class="imgframenew"> <div class="posterimage" style="background:url(/media/images/featured/pic3.jpg);"></div></div> <div class="title"><a rel="/media/link3/">example 3</a></div></div> </div><div class="old"> <!-- duplicate 3rd div content above, here, using div structure below --> <div class="content"><div class="imgframe" style="background:url(/media/images/boxart/pic4.jpg);"></div> <div class="title"><a rel="/media/link4">example 4</a></div></div> <div class="content"><div class="imgframe" style="background:url(/media/images/boxart/pic5.jpg);"></div> <div class="title"><a rel="/media/link5">example 5</a></div></div> <div class="content"><div class="imgframe" style="background:url(/media/images/boxart/pic6.jpg);"></div> <div class="title"><a rel="/media/link6">example 6</a></div></div>
first need corresponding image , link .new
section, have 2 options, can either use clone()
duplicate entry inside .old
, update corresponding values or can create new div .old
structure "by hand".
here's example using clone()
method:
var $tocopy = $('.new .content:eq(2)'); //get third element .new var $newdiv = $('.old .content:first').clone().prependto('.old'); //duplicate first element .old structure var oldbg = $tocopy.find('.posterimage').css('background-image').replace('featured','boxart'); //get background $newdiv.find('.imgframe').css('background-image',oldbg); //set bg $newdiv.find('a').replacewith($tocopy.find('a').clone()); //replace link