如果在使用 jQuery 提交之前删除属性名称，则重命名属性名称

Question

我有一个由 jQuery 生成的输入列表：

<input type='text' name='field["+ j++ +"]' />
<input type='file' name='field["+ j++ +"]' />
<textarea name='field["+ j++ +"]' value='' />
<textarea name='field["+ j++ +"]' value=''/>

当用户添加一个新的输入字段时，j++ 递增，它最终看起来像这样：

<input type='text' name='field[0]' />
<input type='file' name='field[1]' />
<textarea name='field[2]' value='' />
<textarea name='field[3]' value=''/>

现在用户可以使用按钮删除字段，例如：如果我删除了字段[2]，结果如下：

<input type='text' name='field[0]' />
<input type='file' name='field[1]' />
<textarea name='field[3]' value=''/>

问题是递增的字段以后不再适合，因为不是像 0,1,2,3 这样的列表...我有 0,1,3...

我只想在已删除的字段之后更改字段的数字属性以适应其他递增字段

另一件事：用户可以拖放字段来更改顺序。因此，如果删除了 1 个字段，则紧随其后的字段必须占据其编号位置，依此类推

删除字段的代码：

$("#deletebtn").live("click", function(){
  $(this).parent("li").remove();
});

任何帮助将不胜感激。

Answer 1

你可以省略索引，只使用field[]

Answer 2

使用排序为所有元素添加一个通用类名：

<input type='text' name='field[0]' class='dynamic-order' />
<input type='file' name='field[1]' class='dynamic-order' />
<textarea name='field[2]' value='' class='dynamic-order' />
<textarea name='field[3]' value='' class='dynamic-order' />

然后在移除一个元素后，遍历字段并设置新索引：

$("#deletebtn").live("click", function(){
  $(this).parent("li").remove();
  $( ".dynamic-order" ).each(
    function( index ) {
    this.name = "field["+index+"]";
    }
  );
});

编辑：我发现你的 jsfiddle 有一些问题，这里是固定版本：

http://jsfiddle.net/ZKFHH/1/

由于某些原因，名称并不总是显示最新的值，您必须检查它的属性。

Answer 3

首先：如果您使用该名称表单将其与 php（或 asp）作为数组发布，您确实需要枚举输入的名称，您可以只使用 name="field[]"。

如果您只想以这种方式显示名称，请为您的输入提供一个类：

<input type='text' class="input" name='field[0]' />
<input type='file' class="input" name='field[1]' />
<textarea class="input" name='field[2]' value='' />
<textarea class="input" name='field[3]' value=''/>

然后使用 jquery，每次用户更改订单/删除输入时，只需执行此功能：

function re_order(class)
{
  $('.'+class).each(function(index,element){
    this.name='field['+index']';
  });
}

其中 class 是赋予输入的类。