Question

使用jQuery和regex重命名使索引增加1的多维HTML字段的最佳方法是什么？

示例HTML结构：

<div id="parent">
    <div class="children">
        <input type="text" name="user[1][name]">
        <input type="checkbox" name="user[1][title][]" value="PHP Programmer">
        <input type="checkbox" name="user[1][title][]" value="Web Developer">
    </div>
    <div class="children">
        <input type="text" name="user[1][name]">
        <input type="checkbox" name="user[1][title][]" value="PHP Programmer">
        <input type="checkbox" name="user[1][title][]" value="Web Developer">
    </div>
</div>

名称结构user[1][title]或user[1][title][]其中user，[title]或[title][]是任意字符串名称，[1]在添加时必须递增1新儿童HTML。

输出名称必须采用以下格式：

user[1][name]
user[1][title][]
user[1][title][]

user[2][name]
user[2][title][]
user[2][title][]

user[3][name]
user[3][title][]
user[3][title][]

工作代码示例：

$("#parent > .children").each(function(){
    var row = 1;                        

    $("[name]", this).each(function(){
        var name = this.name.replace(/\[(\d+)]*?\]/, '['+ row +']');
        this.name = name;
    });

    row++;
});

我需要一个不包括方括号的正则表达式。

Answer 1

不确定您在使用此流程的过程中，但如果您一次添加这些字段，则可能会有以下情况：

$("#parent").append('<div class="children">');
var count = $(".children").length;
$($(".children")[count-1]).append('<input type="text" name="user[' + count + '][name]">');
$($(".children")[count-1]).append('<input type="checkbox" name="user[' + count + '][title][]" value="PHP Programmer">');
$($(".children")[count-1]).append('<input type="checkbox" name="user[' + count + '][title][]" value="Web Developer">');

http://jsfiddle.net/23p2pusk/1/

Answer 2

运行代码段并检查源代码，您将看到名称已按预期更新。

var count = $(".children").length;
for (var i = 0; i < count; i++) {
    var inputs = $($(".children")[i]).children();
    $(inputs[0]).attr("name", "user[" + (i + 1) + "][name]");
    $(inputs[1]).attr("name", "user[" + (i + 1) + "][title][]");
    $(inputs[2]).attr("name", "user[" + (i + 1) + "][title][]");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="parent">
    <div class="children">
        <input type="text" name="user[1][name]">
        <input type="checkbox" name="user[1][title][]" value="PHP Programmer">
        <input type="checkbox" name="user[1][title][]" value="Web Developer">
    </div>
    <div class="children">
        <input type="text" name="user[1][name]">
        <input type="checkbox" name="user[1][title][]" value="PHP Programmer">
        <input type="checkbox" name="user[1][title][]" value="Web Developer">
    </div>
    <div class="children">
        <input type="text" name="user[1][name]">
        <input type="checkbox" name="user[1][title][]" value="PHP Programmer">
        <input type="checkbox" name="user[1][title][]" value="Web Developer">
    </div>
</div>

增加多维字段名称

2 个答案: