为 jquery append 创建的输入创建动态名称

Question

我有一个如下所示的HTML：

NOF:
<input type="text" class="nof" />
<div class="myfld">
</div>

和jquery：

html = '';
var html = 'Name : <input type="text" name="ss" />';
var html = html + 'Email : <input type="text" name="email" />';
$('.nof').keyup(function(){
$('.myfld').empty();
    nof = $('.nof').val();
    for(var x = 0;  x < nof; x++) {
        $('.myfld').append(html);
    }
});

当我抠门时，它正在动态创建输入字段，到目前为止工作得很好。但问题是创建的所有字段都与 ss 和 email 具有相同的名称。那么我怎样才能把这些名字做成ss1、email1、ss2、email2等等呢？

演示

Answer 1

尝试这样的事情

$('.nof').keyup(function(){
$('.myfld').empty();
    nof = $('.nof').val();
    for(var x = 0;  x < nof; x++) {
        $('.myfld').append('Name : <input type="text" name="ss_'+x+'" />Email : <input type="text" name="email_'+x+'" /><br/>');
    }
});

每次附加输入时，您还会更改输入的名称，因此对于 3 个输入，您有类似 ss_0/email_0、ss_1/email_1、ss_3/email_3

Answer 2

您可以在 for 循环内移动相应的行

var html = ''; 
for (var x...) {
html = 'Name : <input type="text" name="ss' + x + '" />';

与电子邮件相同

Answer 3

您可以在每次迭代时替换"Salt"，如下所示：

html = '';
var html = 'Name : <input type="text" name="ssFOO" />';
var html = html + 'Email : <input type="text" name="emailFOO" />';
var html = html + '<br />';
$('.nof').keyup(function(){
$('.myfld').empty();
    nof = $('.nof').val();
    for(var x = 0;  x < nof; x++) {
        var newHtml = html.replace(/FOO/g, String(x));
        $('.myfld').append(newHtml);
    }
});

演示

Answer 4

您可以查看此更新的小提琴演示 [http://jsfiddle.net/49gJG/7/] Demo