javascript - 创建动态表单元素(具有递增的名称属性)

Question

如何动态创建表单元素并为其提供动态递增的输入名称属性？我正在使用 jquery，但对任何解决方案持开放态度。

我有一个看起来像这样的 div:

<div>

<input type="text" name="title1" />

<input type="text" name="body1" />

<select name="photo1" size="1">

<option value="0">foo</option>

</select>

</div>

我想克隆它 n 次并将名称值增加 1因此，例如，第二个 div 看起来像这样(只有名称值发生变化):

<div>

<input type="text" name="title2" />

<input type="text" name="body2" />

<select name="photo2" size="1">

<option value="0">foo</option>

</select>

</div>

使用 jquery 克隆一个 div 很简单:

$(document).ready(function(){    $('.toClone').click(function(){        $(this).clone(true).insertAfter(this);     });});

但我无法自动递增动态创建的 div 字段的名称值。
任何人都知道如何做到这一点？

Answer 1

你用什么处理这个？使用 PHP，您可以将字段命名为 title[]、body[] 等，以便将它们作为数组发送。这将是最好的方法，因为克隆将变得微不足道。据我所知，它同样适用于其他技术。无论如何，如果你真的想按照自己的方式去做:

$(document).ready(function(){
    $('.toClone').click(function(){
        var el = $(this).clone(true).insertAfter(this);
        var regex = new RegExp(/^(.+)(\d+)$/);
        $(el).find(':input').each(function() {
            var match = $(this).attr('name').match(regex);
            $(this).attr('name', match[1] + (++match[2]));
        });
    });
});

这应该可以解决问题。