jquery 在页面加载时将 div 复制到 div

Question

尝试在同一页面内的页面加载时执行此操作:

CSS:

#item1, #item2, #item3 {visibility: hidden;}

HTML(这些不会显示)

<div id="item1">Something1</div> 
<div id="item2">Something2</div>
<div id="item3">Something3</div>

这些 div 通常为空，但在页面加载后，它们将根据上面的 div 上的内容进行填充。

<div id="real-content">
    <div id="duplicate-item1">Something1</div>
    <div id="duplicate-item2">Something2</div>
    <div id="duplicate-item3">Something3</div>
</div>

有什么想法吗？

更新:我可能会尝试 .clone() 但也会研究你们在下面发布的代码。提前致谢..

事实证明 .clone() 是解决方案..

$('.hello').clone().appendTo('.goodbye');

我怎样才能把.above变成更全局化的？假设我有 20 个需要克隆的 div？

Answer 1

$('#idContainerWithHiddenDivs div').each(function(){
    var idToCopy = $(this).attr('id');
    vat newID = 'duplicate-'+idToCopy;
    var $newDiv = $(this).clone().attr('id', newID);
    $('#real-content').append($newDiv);
});

我认为这是一个很好的方法。

简单示例:http://jsfiddle.net/TQdrH/6/更正了 fiddle 手，最后一个不起作用。

或者您可能想使用这个:http://jsfiddle.net/TQdrH/11/或者您可能想尝试:http://jsfiddle.net/TQdrH/14/在您最后一条评论之后。