Jquery克隆并重命名输入字段

Question

我有以下内容:

<!-- group clone //-->
<div class="section">
    <div class="parent row infoOn">
        <div class="validGroup">
            <a title="remove" class="iconClose" href="#">remove</a>
                <div class="grouping">
                    <div class="clearfix valid">
                        <label>Name<span class="iconReq">&nbsp;</span>:</label>
                        <input type="password" class="text inpButton" name="items[0].first">
                    </div>
                    <div class="clearfix">
                        <label>Email<span class="iconReq">&nbsp;</span>:</label>
                        <input type="text" class="text inpButton" name="items[0].first">
                    </div>
                </div>
            </div>
        </div>
        <div class="row addControl">
            <a href="#" class="button">Add</a>
        </div>
    </div>
    <!-- group clone //-->

和jQuery:

$(function(){
    // Control clone
    $('div.addControl a.button').click(function (e){
        e.preventDefault();
        var parent = $(this).closest('.section').find('.parent:last');
        var parentInput = parent.clone();
        parentInput.find("input").val("");
        parent.after(parentInput);
    });
    $('div.validGroup a.iconClose').live('click', function (e){
        e.preventDefault();
        if ($(this).closest('.section').find('.parent').length > 1){
            $(this).closest('div.parent').remove();
        }
    });
    reflesh();
});

1. 单击"添加"按钮可从输入字段中删除值并克隆组(2个输入字段).
2. 点击"删除"链接删除组

问题:如何更改它以便在添加或删除新组时,输入字段将重命名为name="items[INDEX].first"和name="items[INDEX].last"

例如.当只有一个"组"时,输入字段将具有名称:

• name="items[0].first"
• name="items[0].last"

如果我添加另一个,新的将有

• name="items[1].first"
• name="items[1].first"

等等.当我删除第一个(一个有items[0].first)时,第二个的输入名称将被修改"items[1].first"为items[0].first.

这是它的样子:

Answer 1

我想到了:

var size = parseInt($('.form .section .parent').size());
$('.form .section .parent').each(function(index){
    $(this).find('input.text').each(function(){
        $(this).attr("name", $(this).attr("name").replace($(this).attr("name").match(/\[[0-9]+\]/), "["+index+"]"));
    });
    if (size > 1) { $(this).find('a.iconClose').show(); }else{ $(this).find('a.iconClose').hide(); }
});