javascript - JavaScriptでフォーム要素のID値を変更する

Question

フォーム要素のIDを動的に変更する必要があります。たとえば、要素はid1、id2、id3、id4のような形式のシーケンスになっています（要素の数は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 を更新する関数を 2 つの手順で作成できます。

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

それが役立つことを願っています!