Question

我正在尝试通过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);
    }
}
}

“容器”是我希望在页面上重复填充JSON数据的HTML Div。

这是我的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>

Answer 1

有三件事突然袭来我：

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

希望这有帮助！

编辑：

好的，你几乎就在那里。只需要做一些改动。

将此行$('div.container').append(alpha);更改为$('#repeater').append(alpha);。这意味着你将新的克隆div添加到另一个之后，而不是在其中。
接下来的问题是，当您克隆时，您最终会得到一个div数组，就像您在类（.container）上选择的那样。您需要做的是为第一个ID提供id="template"这样的唯一ID，并在克隆或删除克隆div中的class属性时选择该ID（使用.removeClass()。

JQuery使用循环来创建新的div

1 个答案: