jquery - 从一个 div 中获取数据并插入到页面的另一部分

Question

什么是最好的解决方案...我想获取第三个内容 div 的图像文件名、链接和文本），并将其复制为旧部分中的第一个条目。基本上复制数据内容，但使用旧部分的 div 结构。如您所见，结构上的差异是图像路径（一个使用特色，另一个是 boxart），以及 imgframenew 和 posterimage div。

如果您需要我澄清，请告诉我，因为这有点抽象，我很难用书面形式轻松描述。

<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 from above, here, but using the div structure from 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>

Answer 1

First you need to get the corresponding image and link from the .new section, then you have two options, you can either use clone() to duplicate an entry inside .old and update the corresponding values or you can create a new div with the .old structure "by hand".

Here's an example using the clone() method:

var $toCopy = $('.new .content:eq(2)'); //get the third element from .new
var $newDiv = $('.old .content:first').clone().prependTo('.old'); //duplicate the first element from .old to get the structure

var oldBg = $toCopy.find('.posterimage').css('background-image').replace('featured','boxart'); //get the background
$newDiv.find('.imgframe').css('background-image',oldBg); //set the bg
$newDiv.find('a').replaceWith($toCopy.find('a').clone()); //replace link

Demo fiddle