CODEWITHSUNDEEP
javascriptjqueryclone
Gregory Schultz
Gregory Schultz

Reputation: 844

Cloning contents that are different in each div

I know how to clone contents from one div to another but I'm having a problem where it clones the first div and then copies them to others. My PHP code looks like this:

<div>
<div class="mobile-top"></div>
<div class="post-date">May 11, 2021</div>
</div>
<div>
<div class="mobile-top"></div>
<div class="post-date">May 10, 2021</div>
</div>
<div>
<div class="mobile-top"></div>
<div class="post-date">May 9, 2021</div>
</div>

And my jQuery code clones the first .post-date and then copies that date to the rest. It looks like this:

<div>
<div class="mobile-top">May 11, 2021</div>
<div class="post-date">May 11, 2021</div>
</div>
<div>
<div class="mobile-top">May 11, 2021</div>
<div class="post-date">May 10, 2021</div>
</div>
<div>
<div class="mobile-top">May 11, 2021</div>
<div class="post-date">May 9, 2021</div>
</div>

Any ideas on how to clone .post-date of each <div> and copy them to .mobile-top. It should be a 1-1 match so the date of each post should be copied to .mobile-top

jQuery(document).ready(function($){
    var date = $('.post-date').html();
    $(".mobile-top").show().html(date);
});
.mobile-top {color:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div class="mobile-top"></div>
  <div class="post-date">May 11, 2021</div>
</div>
<div>
  <div class="mobile-top"></div>
  <div class="post-date">May 10, 2021</div>
</div>
<div>
  <div class="mobile-top"></div>
  <div class="post-date">May 9, 2021</div>
</div>

Upvotes: 0

Views: 44

Answers (3)

dale landry
dale landry

Reputation: 8600

You could use $(window).width() < '600' to achieve this, then place a loop over each element and change its test content using $(this) => $(this).prev().text($(this).text())

jQuery(document).ready(function($) {
  $(window).resize(function() {
    let dates = $('.post-date');
    console.log($(window).width())
    if ($(window).width() < '600') {
      dates.each(function() {
        $(".mobile-top").show();
        $(this).prev().text($(this).text())
      })
    } else {
      $(".mobile-top").hide().html('');
    };
  }).resize();
});
.mobile-top {
  color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div class="mobile-top"></div>
  <div class="post-date">May 11, 2021</div>
</div>
<div>
  <div class="mobile-top"></div>
  <div class="post-date">May 10, 2021</div>
</div>
<div>
  <div class="mobile-top"></div>
  <div class="post-date">May 9, 2021</div>
</div>

Upvotes: 1

Kinglish
Kinglish

Reputation: 23654

assuming there is a 1-1 ratio of .mobile-top and .post-date you could do this

let dates = $('.post-date');
$('.mobile-top').each( function (index) {
  $(this).html($(dates[index]).html());
})

Upvotes: 1

Barmar
Barmar

Reputation: 780949

You need to get the HTML from the sibling element, not use a single variable for all of them.

jQuery(document).ready(function($) {
  $(".mobile-top").html(function() {
    return $(this).siblings(".post-date").html();
  });
});
.mobile-top {
  color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div class="mobile-top"></div>
  <div class="post-date">May 11, 2021</div>
</div>
<div>
  <div class="mobile-top"></div>
  <div class="post-date">May 10, 2021</div>
</div>
<div>
  <div class="mobile-top"></div>
  <div class="post-date">May 9, 2021</div>
</div>

Upvotes: 4

Related Questions