您如何在使用jQuery的for循环中动态创建的div名称后面追加？

Question

我正在尝试做这样的事情：

        var size = skillsArray.length;
        for (i = 0; i < size; i++) {
            var divString = "'#Skill" + i +"'";
            $(divString).append(skillsArray[i]);
        }

首先，我的技能是5个值。 所以我的JavaScript是这样的：

        $('#Skill0').append(skillsArray[0]);
        $('#Skill1').append(skillsArray[1]);
        $('#Skill2').append(skillsArray[2]);
        $('#Skill3').append(skillsArray[3]);
        $('#Skill4').append(skillsArray[4]);

我的HTML是这样的：

        <div id='Skill0'></div>
        <div id='Skill1'></div>
        <div id='Skill2'></div>
        <div id='Skill3'></div>
        <div id='Skill4'></div>

而且一切正常。

现在，我想使用更大的动态大小的数组，我想使用循环。

因此，我的第一步是在javascript循环中写出html div标签，该标签可以正常工作：

 for (i=0; i<size; i++)
 {
   html += "<div id='Skill" + i + "'></div>";
 }

在尝试第2步（这是我的问题所在）之前，它确实显示前5个技能还不错，而之后的每个技能都是空白。 （可以预料，因为我还没有更新我的JavaScript来对每个div进行追加，所以它仍然只执行了前5个。）

因此，我准备尝试步骤2并为附件使用for循环。 我怎样才能做到这一点？ 我在最顶部粘贴的代码根本没有在每个div中填充任何内容。

先谢谢您的帮助！ -冬青

Answer 1

尝试删除此行中的单引号： var divString = "'#Skill" + i +"'"; 像这样：

var divString = "#Skill" + i;

Answer 2

摆脱选择器字符串中的单引号：

var divString = "#Skill" + i;

Answer 3

你可以试试这个

$("div[id^='Skill']").each(function(i) {
    $(this).append(skillsArray[i]);
});

Answer 4

在同一循环中执行所有操作：

var size = skillsArray.length;
for (i = 0; i < size; i++) {
    // create a div
    var $elem = $("<div id='Skill" + i + "'></div>");

    // append the skills to div
    $elem.append(skillsArray[i]);

    // append the div to body (or wherever)
    $('body').append($elem);
}