Javascript 如何将div复制/克隆到其他容器中相应的结构

使用jquery将div列表中的div复制/克隆到另一个容器中相应位置的最佳方法是什么

我尝试将所有“复制此”元素复制到另一个容器中的相同位置。因此，第一个“.copy this”应复制到第二个容器的第一个项目中，与（2）->（2）等相同

HTML DOM:

<div class="content">
    <div class="item">
        <div class="copy-this">Some info</div>
        <div class="random-div">Not to copy</div>
    </div>
    <div class="item">
        <div class="copy-this">Some info 2</div>
    </div>
    <div class="item">
        <div class="copy-this">Some info 3</div>
        <div class="random-div">Not to copy</div>
    </div>
    <div class="item">
        <div class="copy-this">Some info 4</div>
    </div>
</div>
<div class="content">
    <div class="item"> 
    </div>
    <div class="item">
        <div class="random-div">Not to copy</div>   
    </div>
    <div class="item">      
    </div>
    <div class="item">      
    </div>
</div>

一些信息
不抄袭
一些信息2
一些信息3
不抄袭
一些信息4
不抄袭

尝试循环第一个div，然后将复制的outerHTML插入第二个容器中

var content1=document.getElementsByClassName（'content'）[0]，
content1Items=content1.getElementsByClassName（'item'），
content2=document.getElementsByClassName（'content'）[1]，
content2Items=content2.getElementsByClassName（'item'），
复制HTML；
for（var i=0，l=content1Items.length；i

一些信息
不抄袭
一些信息2
一些信息3
不抄袭
一些信息4
不抄袭

编辑

OP已请求在视口大小（窗口宽度）为600像素或更小时存在克隆的条件下的行为

如何在响应函数中使用此函数，在窗口加载/调整大小低于600px时复制它，在窗口再次调整大小超过600px时删除它？如果我把它包装成这样：

$（window）.on（“load resize”，函数（e）{If（$（window）.width（）<1200）{}）每次调整大小都会持续触发

虽然这完全是另一个问题，但我在回答OP的评论/问题时添加了此解决方案。以下使用一个媒体查询，额外的样式仅用于演示目的。相关新增内容是一个媒体查询和一个规则集：


原始答案

首先，我们收集所有
。使用以下方法复制此
：

接下来，我们需要区分2个
.content
div，以便指定我们需要从哪个div克隆内容，以及将克隆附加到哪个div（在不修改布局的情况下，假设有条件），我们可以使用。在我们将附加到的目标元素中有一个坚实的钩子，我们将使用它将第一个
.content
的
.item
同步到最后一个
.content
的
.item
上

最后，我们和。请注意，克隆在黑色背景上以黄色文本突出显示

片段


$（'.copy this'）。每个（函数（idx、obj）{
var target=$（'.content+.content>.item'）.eq（idx）；
var clone=$（this）.clone（true，true）；
预结束（克隆）；
});
.content+.content>.item>。复制此文件{
颜色：黄色；
背景：黑色；
}
.随机分组{
颜色：棕色；
}

一些信息1[#1]
不复制1[#1]
一些信息2[#1]
一些信息3[#1]
不复制2[#1]
一些信息4[#1]
这是原创内容[2]
n个选择器
不关心类，只关心标签名，如
a
，
div
，
节
等，以及元素相对于其同级的位置。可能重复的
，content~。content
将针对第一个之后的所有
。content
。或
body>div:n类型（3）
。或
.content+.content+.content
。诀窍是瞄准目的地，而不是你来自哪里。来自第1个或第2个，等等，可以事先存储在一个变量中。好吧，您已经回答了自己的问题：
“$（window）.width（）<1200）{}”；每次调整大小时它都会触发。
确实会，因为如果窗口小于1200px，它说的是onresize，请创建一批克隆。那你问我限额在600像素以下怎么办？这就是你要做的：将1200减少到600，当你调整大小时，它不会克隆那么多，因为通常在640到960之间调整窗口大小。查看：查看编辑，如果这些答案解决了您的问题，请单击绿色按钮✔.
@media (min-width:600px) {
  .content + .content > .item > .copy-this {
    display: none;
  }
}

$('.copy-this').each(function(idx, obj) {

var target = $('.content + .content > .item').eq(idx);

var clone = $(this).clone(true, true);
target.prepend(clone);