javascript - 如何使用 .each() 分隔内容 - jQuery

Question

我有两个隐藏的<div>隐藏在页面底部的元素如下所示:

<div class="hidden-unit" style="display:none;">
    <h1>ad unit one</h1>
</div>
<div class="hidden-unit" style="display:none;">
    <h1>ad unit two</h1>
</div>

在我的页面上，我还有另外两个 div 元素，就像这样......

<div class="visible-unit"></div>
<div class="visible-unit"></div>

我想循环遍历每个隐藏单元，将内容从第一个 .hidden-unit 开始放置进入第一条.visible-unit然后第二个也是如此。

每个 .hidden-unit 中的内容实际上是一个用于显示广告的内联脚本，它从数组传递到我在 PHP 中创建的 View 中，因此很有可能将更多内容添加到数组或删除，因此这个循环需要适应这种情况。

我已经尝试了许多使用 jQuery 的解决方案 .each()但我似乎无法做对。如果有人想要演示解决方案，我还创建了一个 JSFiddle:

https://jsfiddle.net/p89sq2df/3/

我尝试了很多不同的组合，最新的尝试似乎只是填充 .visible-unit带有“广告单元二”文本的元素。

$('.hidden-unit').each(function() {
    $('.visible-unit').html($(this).html());
});

以前有人必须这样做吗？我很欣赏这是一个奇怪的事情。

Answer 1

您可以尝试使用索引:

$('.hidden-unit').each(function(index) {
    $('.visible-unit').eq(index).html($(this).html());
});