克隆每个div中不同的内容答案

【问题标题】：Cloning contents that are different in each div克隆每个div中不同的内容
【发布时间】：2021-05-26 22:45:20
【问题描述】：

我知道如何将内容从一个 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 匹配，所以每个帖子的日期应该复制到 .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>

【问题讨论】：

媒体查询是否与此问题相关？它会阻止您的代码在 sn-p 中工作。
已修复。问题是我正在使用窗口调整大小

标签： javascript jquery clone

【解决方案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>

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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>

【讨论】：