使用jQuery重新编号文本输入数组索引

Question

我有以下HTML块,用于从用户收集有关项目的信息作为表单的一部分:

<div class="clone_block">
  Name: <input type="text" name="items[0][name]" /><br />
  Amount: <input type="text" name="items[0][amount]" /><br />
  <button class="delete">Delete</button>
</div>

我可以克隆这个元素(如果用户想要添加另一个项目)并将它div.clone_block放在DOM 的最后一个实例之后,一切正常,我也可以删除元素.但是,我最终得到了具有相同名称的多个文本输入实例,这意味着只有最后一个显示在POST请求中(之前的请求被覆盖).我想要做的是重新编号所有项目,以便第一个item[0],第二个是item[1]等.

有没有办法在jQuery中执行此操作？以这种方式创建名称可以更容易地使用PHP处理POST数据,因此我不希望在可能的情况下更改命名方案.

Answer 1

您可以实现类似这样的操作,以在每次克隆/删除后重命名元素:

function renumber_blocks() {
    $(".clone_block").each(function(index) {
        var prefix = "items[" + index + "]";
        $(this).find("input").each(function() {
           this.name = this.name.replace(/items\[\d+\]/, prefix);   
        });
    });
}

演示:http://jsfiddle.net/Wzzf2/1/

Answer 2

如果您使用PHP作为服务器端语言,则可以执行以下操作:

<div class="clone_block">
  Name: <input type="text" name="items[][name]" /><br />
  Amount: <input type="text" name="items[][amount]" /><br />
  <button class="delete">Delete</button>
</div>

PHP将在收到数据时自动处理创建正确的偏移索引.

但是,要回答您的问题,一旦克隆了块,您只需要导航其结构并使用递增的数字更改名称属性.或者更好的是仍然导航所有输入并在使用添加或删除按钮时重新索引它们...这将允许删除.

/// find each row with inputs
$('div.form_row').each(function(rowIndex){
  /// find each input with a name attribute inside each row
  $(this).find('input[name]').each(function(){
    var name;
    name = $(this).attr('name');
    name = name.replace(/\[[0-9]+\]/g, '['+rowIndex+']');
    $(this).attr('name',name);
  });
});

以上标记将起作用(并已经过测试),您应该看到索引被重新排序:

<div class="form_row"><input name="something[0][abc]"></div>
<div class="form_row"><input name="something[2][abc]"></div>
<div class="form_row"><input name="something[3][abc]"></div>

更正!

刚刚实现了依赖PHP生成索引的错误......如果你的索引是数组结构的最后一部分,它将会起作用:

something[abc][]
something[def][]

但如果您正在使用(像您一样):

something[][abc]
something[][def]

您将最终得到以下PHP方面:

array (
   '0' => array( 'abc' => 'value' ),
   '1' => array( 'def' => 'value' ),
)

而不是:

array (
   '0' => array( 
     'abc' => 'value',
     'def' => 'value',
   ),
);

哪个可能更符合您的要求.因此,对于您的示例,请忽略我提到的PHP路由并使用jQuery代码段.如果每行只有一个输入,那么PHP解决方案仍然有用...