每个 div 中不同的克隆内容

Question

我知道如何将一个 div 的内容克隆到另一个 div，但我遇到了一个问题，它克隆第一个 div，然后将它们复制到其他。我的 PHP 代码如下所示：

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

我的 jQuery 代码克隆第一个 .post-date，然后将该日期复制到其余日期。它看起来像这样：

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

关于如何克隆每个 <div> 的 .post-date 并将它们复制到 .mobile-top 的任何想法。它应该是 1-1 匹配，所以每个 post 的日期应该被复制到 .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>

Answer 1

您需要从兄弟元素中获取 HTML，而不是对所有元素使用一个变量。

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>

Answer 2

假设 .mobile-top 和 .post-date 的比例为 1-1，您可以这样做

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

Answer 3

您可以使用 $(window).width() < '600' 实现此目的，然后在每个元素上放置一个循环并使用 $(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>

每个 div 中不同的克隆内容

Cloning contents that are different in each div

javascript

jquery

clone