我知道如何将内容从一个 div 克隆到另一个 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>
关于如何克隆每个 .post-date
的 <div>
并将它们复制到 .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>
答案 0 :(得分:4)
您需要从兄弟元素中获取 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>
答案 1 :(得分:1)
假设 .mobile-top
和 .post-date
的比例为 1-1,您可以这样做
let dates = $('.post-date');
$('.mobile-top').each( function (index) {
$(this).html($(dates[index]).html());
})
答案 2 :(得分:1)
您可以使用 $(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>