JQuery 使用循环创建新的 div答案

【问题标题】：JQuery using a loop to create new divsJQuery 使用循环创建新的 div
【发布时间】：2010-07-20 04:47:18
【问题描述】：

我正在尝试通过 JQuery 循环递增以使用 JSON 文件中的数据填充一些 HTML 代码。问题是我似乎无法弄清楚如何将 div 写入彼此下方的 HTML，而是循环将数据彼此递增，最后在屏幕上显示数组中的最后一个对象。

这是我的 Javascript (tubing.js)：

$(document).ready(function() {
crazyFun();
});

function crazyFun() {
for (var i = 0; i < virtualGoods.length; i++) {
        var alpha= $('div.container').clone();
        alpha.find('div.picture').attr('id', virtualGoods[i].picture);
        alpha.find('h2').html(virtualGoods[i].header);
        alpha.find('p').html(virtualGoods[i].text);
        alpha.find('div.notification').attr('id', virtualGoods[i].notification);
        $('div.container').append(alpha);
    }
}
}

“Container”是我想在我的页面上重复的 HTML Div，并填充了 JSON 数据。

这是我的 HTML：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Hello World</title>
        <link rel="stylesheet" type="text/css" href="iphone.css"/>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="virtualgoods.js"></script>
        <script type="text/javascript" src="tubing.js"></script>
    </head>
    <body>
        <div id="mainhead">
            <h1>
            Hello World
            </h1>
        </div>
        <div id="repeater">
                <div class="container">
                    <div class="picture">
                    </div>  
                    <div class="object">
                        <div class="header">
                            <h2></h2>
                        </div>
                        <div class="text">
                            <p>

                            </p>
                        </div>
                    </div>
                    <div class="notification">
                    </div>
                    <div class="neg">
                    </div>
                </div>
        </div>      
    <div id="buffer">
    </div>
    </body>
</html>

【问题讨论】：

你能展示你的 html 代码吗？
您能否澄清一下正在克隆哪个div 以及将其放置在哪里...中继器容器是否被克隆并插入到缓冲区容器中？当我确切知道发生了什么时，我会更新我的答案以更好地适应这个
当然，阿拉斯泰尔。我需要克隆 Container 类 div 中的所有内容，并且需要在前一个 div 下方（一个接一个）创建其他 Container div。缓冲区 div 只是一个虚拟 div ...我刚刚意识到我需要从标签中删除 Container 类属性。我也尝试实现你的代码，当我运行 HTML 文件时，它让我的电脑停了下来。

标签： jquery

【解决方案1】：

我突然想到了 3 件事：

$('container') 不是用id="container" 选择你的div，而是在寻找<container> 元素。尝试将其更改为 $('#container')。
您正在将容器（或者当您执行 #1 时）克隆为 alpha，但您没有对其进行任何数据处理。试试这个模式：alpha.find('div.picture').attr('id', virtualGoods[i].picture);。现在您正在编辑克隆的 alpha div 中的 div。
您想使用.after() 而不是追加。这将在container 之后的DOM 中插入alpha，而不是在其中。

希望这会有所帮助！

编辑：

好的，你快到了。只需进行一些更改。

将此行 $('div.container').append(alpha); 更改为 $('#repeater').append(alpha);。这意味着您将新的克隆 div 附加在另一个之后，而不是在其中。
下一个问题是，当您克隆时，您最终会得到一个 div 数组作为您在类上选择的 alpha (.container)。您需要做的是给第一个 ID 一个唯一的 ID，例如 id="template"，然后在克隆时选择它或从克隆的 div 中删除类属性（使用 .removeClass()。

【讨论】：

我还根据您在我的原始帖子中的建议更新了我的代码。
谢谢！！有效。您能否更详细地解释为什么我需要为容器分配一个唯一 ID？在那部分我还是一头雾水。
有一个涉及 id 和 class 的 stackoverflow 问题可能会有所帮助：stackoverflow.com/questions/970730/css-id-vs-class