gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-31 22:56:19 25 4
gpt4 key购买 nike

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

我尝试将所有“copy-this”元素复制到另一个容器中的相同位置。所以首先“.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>

最佳答案

编辑

OP 要求在视口(viewport)大小(窗口宽度)条件下的行为是克隆在 600 像素或更小时出现。

How would you use this functions inside a responsive function, to copy it if the window loads/resizes under 600px, and remove it if it resizes to over 600px again? If i wrap it in this: $(window).on("load resize",function(e){ if ($(window).width() < 1200) { } }); It keeps firing for each resize.

虽然这完全是另一个问题,但我已经添加了这个解决方案来回复 OP 的评论/问题。以下PLUNKER使用一个媒体查询,额外的样式仅用于演示目的。相关的添加是一个媒体查询和一个规则集:

@media (min-width:600px) {
.content + .content > .item > .copy-this {
display: none;
}
}

原始答案

首先我们收集所有.copy-this .each() 方法:

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

接下来,我们需要区分 2 .content div 为了指定我们需要从哪个 clone 内容以及将克隆附加到哪个 divs(假设该标准不修改布局),我们可以使用 adjacent sibling selector + .通过对我们将附加到的目标元素的可靠钩子(Hook),我们将使用 .eq(idx) 同步 .item从第一个开始.content , 至 .item最后的 s .content .

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

最后,我们 .clone() .prepend() .请注意结果,克隆在黑色背景上以黄色文本突出显示。

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

片段

    $('.copy-this').each(function(idx, obj) {
var target = $('.content + .content > .item').eq(idx);
var clone = $(this).clone(true, true);
target.prepend(clone);
});
.content + .content > .item > .copy-this {
color: yellow;
background: black;
}
.random-div {
color: brown;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
<div class="content">
<div class="item">
<div class="copy-this">Some info 1[#1]</div>
<div class="random-div">Not to copy 1[#1]</div>
</div>
<div class="item">
<div class="copy-this">Some info 2[#1]</div>
</div>
<div class="item">
<div class="copy-this">Some info 3[#1]</div>
<div class="random-div">Not to copy 2[#1]</div>
</div>
<div class="item">
<div class="copy-this">Some info 4[#1]</div>
</div>
</div>
<div class="content">
<div class="item">
</div>
<div class="item">
<div class="random-div">This is original content[#2]</div>
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
</body>

关于javascript - 如何将div复制/克隆到其他容器中的相应结构,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41132121/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com