How to copy/clone div to corresponding structure in other container

Question

What is the best way to copy/clone a div inside a list of divs with jquery to the corresponding locations in another container.

I try to copy all "copy-this" elements to the same location in the other container. So first ".copy-this" should be duplicated in the first item of the second container, same for (2)->(2) etc...

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>

`nth-selectors` don't care about class, only tag names like `a`, `div`, `section`, etc. and an elements position relative to it's siblings. — zer00ne, Dec 13 '16 at 23:29
Possible duplicate of [jQuery duplicate DIV into another DIV](http://stackoverflow.com/questions/16068047/jquery-duplicate-div-into-another-div) — Sᴀᴍ Onᴇᴌᴀ, Dec 13 '16 at 23:53

zer00ne · Accepted Answer · 2016-12-16T21:31:01.400

EDIT

OP has requested the behavior under the condition of viewport size (window width) being that the clones are present when at 600px or less.

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.

While this should be another question entirely, I have added this solution in reply to OP's comment/question. The following PLUNKER uses one media query and the extra styles are for demonstration purposes only. The relevant addition is one media query with one ruleset:

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

ORIGINAL ANSWER

First we collect all .copy-this with .each() method:

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

Next, we need to differentiate the 2 .content divs in order to designate which one we need to clone the content from and which one to append the clones to (without modifying layout assuming that a criterion), we can use the adjacent sibling selector +. With a solid hook into the target elements we will append to, we'll use .eq(idx) to sync the .items from the first .content, to the .items of the last .content.

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

Finally, we .clone() and .prepend(). Note the results in that the clones are highlighted with yellow text on black background.

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

SNIPPET

    $('.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>

`,content ~ .content` will target all `.content` after the first one. Or `body > div:nth-of-type(3)`. Or `.content + .content + .content`. The trick is targeting the destination not so much as to where you came from. Coming from the 1st or the 2nd, etc. can be stored in a var beforehand. — zer00ne, Dec 14 '16 at 04:47
Well, you kinda already answered your own question: `"$(window).width() < 1200) { } }); It keeps firing for each resize."` Indeed it will because it's saying onresize if the window is **less than 1200px** make a batch of clones. Then you ask me the limit is under 600px what to do? That's what you do: cut 1200 down to 600 and it won't clone as much when you resize since it's more common to resize windows between 640 to 960. See this: [Plunker](http://embed.plnkr.co/va9GQkx4ZQMBsrDnROfB/) — zer00ne, Dec 16 '16 at 10:06
See edit, and if these answers have resolved your problems, click the green ✔. — zer00ne, Dec 16 '16 at 21:33

score 2 · Answer 2 · 2016-12-14T06:15:43.113

Try to loop through first div then insert outerHTML of copy-this into second container

var content1 = document.getElementsByClassName('content')[0],
    content1Items = content1.getElementsByClassName('item'),
    content2 = document.getElementsByClassName('content')[1],
    content2Items = content2.getElementsByClassName('item'),
    copiedHTML;

for (var i = 0, l = content1Items.length; i < l; i++) {
    copiedHTML = content1Items[i].getElementsByClassName('copy-this')[0].outerHTML;

    content2Items[i].insertAdjacentHTML('afterbegin', copiedHTML);
}

<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>

Jquery method

var content1 = $('.content').eq(0),
    content2 = $('.content').eq(1),
    copiedHTML;

$.each(content1.find('.item'), function (i, item) {
  copiedHTML = $(item).find('.copy-this').clone();
  content2.find('.item').eq(i).prepend(copiedHTML);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<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>

How to copy/clone div to corresponding structure in other container

2 Answers2

Jquery method