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。

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

我尝试过使用jQuery .visible-unit的一些解决方案，但我似乎无法做到正确。如果有人想要演示解决方案，我也创建了一个JSFiddle：

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

我已经尝试了大量不同的组合，最新的尝试似乎只是使用'ad unit two'文本填充$('.hidden-unit').each(function() { $('.visible-unit').html($(this).html()); });元素。

{{1}}

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

Answer 1

您可以尝试使用索引：

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

Answer 2

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

来完成

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

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

的 DEMO

Answer 3

var visibleUnits = $('.visible-unit').toArray();
var x = 0;

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

问题是，可能会有比.visible-unit元素更多的.hidden-unit元素，这会导致异常。但是这让你走在正确的轨道上。

Answer 4

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

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

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

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

4 个答案: