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 

demo fiddle


Popular posts from this blog

php - How should I create my API for mobile applications (Needs Authentication) -

python 3.x - PyQt5 - Signal : pyqtSignal no method connect -

5 Reasons to Blog Anonymously (and 5 Reasons Not To)