如何使用 jquery 将数组值分配给动态创建的文本框？答案

【问题标题】：how to assign array values into dynamically created textboxes using jquery?如何使用 jquery 将数组值分配给动态创建的文本框？
【发布时间】：2013-09-05 13:41:03
【问题描述】：

我已经使用 Jquery Mobile 通过 for 循环创建了一个文本框列表。我需要从数组列表中将文本填充到这些文本框中。我尝试使用以下代码，但无法正常工作。

var myArray = ["Lion","Tiger","Deer","Elephant","Zebra"];
<div class="ui-grid-a"></div>

脚本标签包含；

for(i=0;i<5;i++)
{
var content = '<div class="ui-block-a">'
content += '<input data-role="none" type="text" id="textboxId" readonly/>'
$('#textboxId').val(myArray[i]);
content += '</div>'
$('.ui-grid-a').append(content);
}

【问题讨论】：

标签： jquery html jquery-mobile

【解决方案1】：

您正在尝试访问尚未添加到 DOM 的元素，您可以在将其添加到内容字符串中时将值添加到 textbox。请注意，您对所有错误的文本框都使用相同的id。您可以将i 附加到文本框的id 以使id 唯一。

content += '<input id="textboxId"'+i+'" readonly value="' + myArray[i] + '" data-role="none" type="text" />'

【讨论】：

【解决方案2】：

您需要为每个 div 设置不同的 id。

var myArray = ["Lion","Tiger","Deer","Elephant","Zebra"];

for(i=0;i<5;i++)
{
    var content = '<div class="ui-block-a">'
    content += '<input data-role="none" type="text" id="textboxId_'+i+'" readonly/>'
    content += '</div>'
    $('.ui-grid-a').append(content);
    $('#textboxId_'+i).val(myArray[i]);
}

Demo

【讨论】：

欢迎您。如果您能接受答案，如果它解决了您的问题，那就更好了。

【解决方案3】：

var myArray = ["Lion","Tiger","Deer","Elephant","Zebra"];
<div class="ui-grid-a"></div>

你的脚本：

        for(i=0;i<5;i++)
        {
           var content = '<div class="ui-block-a">'
           content += '<input id="textboxId '+i+'" readonly value="' + myArray[i] + '"data-role="none   "type="text" />'
           $('.ui-grid-a').append(content);
        }

【讨论】：

【解决方案4】：

你可以这样做：

var myArray = ["Lion","Tiger","Deer","Elephant","Zebra"];
for(i=0; i < myArray.length; i++) {      
      $("<div />", {
          "class" : "ui-block-a"
      }).append($("<input />", {
          "data-role": "none",
          "value": myArray[i],
          "type" :"text",
          "readonly": true
      })).appendTo(".ui-grid-a");
}

演示:: jsFiddle

【讨论】：