Question

在那里有一个ID =“cartArea”的div我有多个文本框

<input type="text" id="tb_1" name="tb_1" />
<input type="text" id="tb_2" name="tb_2" />
<input type="text" id="tb_3" name="tb_3" />

等等，列表中可能有更多或更少的项目。在每个文本框旁边都有一个删除选项。我可以将选定的文本框从容器div中删除没问题，但我需要做的是重命名剩余的文本框。

因此，如果我删除tb_2，我就不会使用tb_1和tb_3，而是tb_1和tb_2

可以这样做，如果是这样的话？

Answer 1

将此代码放入某个函数中，并在删除元素后调用该函数。

试试这个，Live Demo

 $('#cartArea').children('input[type=text]').each(function(){

    this.name ='tb_' + eval($(this).index()+1);
    //alert( this.name)
  });

Answer 2

您可以非常简单地实现目标：

$('#cartArea input[type=text]').attr('id', function(){
  return 'tb_' + $(this).index();  // change id
}).attr('name', function() {
  return 'tb_' + $(this).index();  // change name
});

<强> DEMO

Answer 3

删除后，您可以运行此代码重命名它们：

$('input[id^=tb_]').each(function(i, v){ this.name = 'tb_' + i; });

Answer 4

删除后，您可以遍历其余元素并更改名称attr

示例HTML：

<input type="text" id="tb_1" name="tb_1" /><span>remove</span>
<input type="text" id="tb_2" name="tb_2" /><span>remove</span>
<input type="text" id="tb_3" name="tb_3" /><span>remove</span>

示例代码：

jQuery('span').click(function(){
   jQuery(this).prev().remove();
   jQuery(this).remove();
    jQuery('input').each(function(index){
       jQuery(this).attr('name','tb_' + (index +1));   
    });
});

JSFiddle

Answer 5

我不喜欢别人的回复，因为他们要么使用昂贵的输入[id ^ =]选择器，罗嗦的输入[type = text]选择器，没有考虑i-being 0或者没有设置name属性。

您可以在删除后运行此代码以重命名文本框。

$('#cartArea input:text').each(function(i){ this.id = this.name = 'tb_' + (i + 1); });

JSFiddle：http://jsfiddle.net/HT6gS/

Answer 6

这里不需要古怪的JavaScript解决方案。

就像这样：

<input type="text" id="tb_1" name="tb[]" />
<input type="text" id="tb_2" name="tb[]" />
<input type="text" id="tb_3" name="tb[]" />

服务器端可以通过$_GET['tb']访问它，这是一个数组。如果您向服务器发送了3个输入，那么$_GET['tb'][0]，$_GET['tb'][1]和$_GET['tb'][2]代表您的数据。

jQuery - 重命名元素

6 个答案: