jquery - 将数字字符串转换为具有类的不同 div。Jquery 或 Ajax

Question

所以我从数据库中回显了一串数字。这串数字看起来像：

var numbers = "12,156,4,198,759"

我希望将此字符串打印到不同的 div 中，例如

<div class="div-12"></div>
<div class="div-156"></div>
<div class="div-4"></div>
<div class="div-198"></div>
<div class="div-759"></div>

这个字符串可以创建大量的 div，甚至多达几千个。

这可以使用 Ajax 或纯客户端 Jquery 来完成。然而，Ajax 是首选。

老实说，我不知道我将如何去做。我对Ajax 不太了解，所以不必赘述。

请帮帮我:)

Answer 1

假设您已从 ajax 调用中以逗号分隔的数字列表形式返回数据，您可以执行以下操作：

http://jsfiddle.net/RrA3u/1/

var numbers = "1,2,3,4,5,99";

var list = numbers.split(",");

$.each(list, function(index, value){
    $("#container").append("<div>").class("div-" + value).text("div " + value));
});

Answer 2

在纯 javascript 中，您可以执行以下操作：

function createDiv(element, index, array) {
    var div = document.createElement('div');
    div.className = "div-" + element;
    div.innerHTML = "class div-" + element;
    document.getElementsByTagName('body')[0].appendChild(div);
}

var numbers = "12,156,4,198,759";
var number_list = numbers.split(",");
number_list.forEach(createDiv);

Answer 3

为了获得最佳性能，请使用片段：

var fragement = document.createDocumentFragment();

for (i in list) {
    var div = document.createElement('div');
    div.className = "div-" + list[i];
    div.innerHTML = list[i];
    fragement.appendChild(div);
}
document.getElementById('container').appendChild(fragement);

包含 1000 个数字的数组的结果：

• 使用 jQuery： 73 毫秒
• 使用片段： 8ms

http://jsfiddle.net/rotev/EnNYM/2/