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

Question

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

Answer 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。

我希望这会有所帮助。

Answer 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++;
  });
}

希望有帮助！