Question

对此最好的解决方案是什么...我想获取第3个内容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

首先，您需要从.new部分获取相应的图片和链接，然后您有两个选项，您可以使用clone()复制.old内的条目并更新相应的值，或者您可以手动创建.old结构的新div。

以下是使用clone()方法的示例：

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

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

1 个答案: