使用 javascript 更改表单元素的 ID 值答案

【问题标题】：Change an ID value of a form element with javascript使用 javascript 更改表单元素的 ID 值
【发布时间】：2012-09-08 00:49:11
【问题描述】：

我需要动态更改表单元素的 id。例如，元素以id1、id2、id3、id4的形式依次排列（元素个数不固定为4个，可以多于4个）。我需要在 id1 之后添加一个元素作为 id2。发生这种情况时，已经在表单中的 id2 应该更改为 id3 并且 id3 应该更改为 id4 等等。我想把它放在一个带有javascript的递归函数中，但到目前为止还没有任何想法......请帮忙。

【问题讨论】：

听起来您不应该为此使用 ID，也许是 data-order 属性。您能否发布您对 ID 有序的需求？
我正在使用 javascript 动态添加重复组（字段集）。如果添加在序列中，我将不得不更改我能够更改的字段集 ID，但如果添加过程不在序列中则失败（如果用户首先在第二个位置添加一个元素，然后在第一个位置添加一个元素位置。
是使用 jQuery 还是需要纯 JavaScript？

标签： javascript html

【解决方案1】：

使用 jquery 你可以这样做：你有一些带有“listItem”类和一个id的html标签。

<div id="1" class="listItem">something </div>
<div id="2" class="listItem">something </div>
<div id="3" class="listItem">something </div>

然后是脚本

var i = 2;
$(".listItem").each(function() {
     $(this).attr("id", i++);
});

这应该将内容更改为

<div id="2" class="listItem">something </div>
<div id="3" class="listItem">something </div>
<div id="4" class="listItem">something </div>

这将遍历所有具有“listItem”类的标签并更改 id。

希望对你有帮助。

【讨论】：

嗨...感谢您的回复。我正在使用 javascript，这也会改变特定元素的 id 而不是递归的，对吧..？
正确。你可以做的是给元素一个类，这样你就可以遍历它们并改变它们。我将编辑我的答案并向您展示如何做到这一点。
当我在 10 分钟内回家时，因为它很难打电话：p
好了，这是最干净的方法。

【解决方案2】：

假设你的 html 是这样的：

<div id="id1" class="list"></div>
<div id="id2" class="list"></div>
<div id="id3" class="list"></div>

您可以创建一个函数，在中间插入一个新元素，并通过如下两步更新以下所有元素的 id：

function(insertAfterId) {
  jQuery('#' + insertAfterId).insert('<div id="temp" class="list"></div>');
  var count = 1;
  jQuery('.list').each(function() {
    jQuery(this).attr("id", "id" + count);
    count++;
  });
}

希望有帮助！

【讨论】：

反对票是什么？ jonathan.cruz 上面的答案是在我已经发布我的答案之后创建的！