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

How to separate content with .each() - jQuery

本文关键字：分隔 -jQuery 何使用 each      更新时间：2023-09-26

我有两个隐藏的<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中创建的视图中，因此很有可能会向数组中添加或删除更多内容，因此此循环需要适应这种情况。

我使用jQuery的.each()尝试了许多解决方案，但似乎都做不好。如果有人想演示一个解决方案，我还创建了一个JSFiddle：

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

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

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

以前有人做过这样的事吗？我很感激这是一个奇怪的问题。

您可以尝试使用索引：

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

var visibleUnits = $('.visible-unit').toArray();
var x = 0;
$('.hidden-unit').each(function() {
        visibleUnits[x].html($(this).html());
        x++;
    });

问题是可能有更多的.hidden单元元素而不是.visible单元元素，这会导致异常。但这让你走上了正轨。

您需要使用索引元素，以便更新匹配的实例。这可以使用each或html(function) 来完成

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

由于您提到内容最初是由脚本加载的，因此您可能需要留出时间在脚本中进行任何异步加载（如果有的话）

DEMO

您可以克隆隐藏的div并将其添加到容器中，如果您真的不想要容器元素，也可以将它们插入另一个元素之前或之后，而不是试图匹配索引并维护两个div列表。

$(".hidden-unit").clone()
    .removeClass("hidden-unit")
    .removeAttr("style")
    .addClass("available-unit")
    .appendTo(".container");

在这里工作小提琴：https://jsfiddle.net/ygn34zL8/

相关文章：