Question

我有一些输入如下：

<input type="hidden" id="selected_id-1" name="e_id[]" />
<input type="hidden" id="selected_id-2" name="e_id[]" />
<input type="hidden" id="selected_id-3" name="e_id[]" />
<input type="hidden" id="selected_id-4" name="e_id[]" />

我还有每个输入的按钮，用于删除该输入。

但是，当我删除例如"selected_id-2"输入时，我想更新下一个输入的id。因此，"selected_id-3"将成为"selected_id-2"，"selected_id-4" - "selected_id-3"。

我如何更新这些ID？需要纯JavaScript，没有框架。

Answer 1

你想要这样的东西吗？

var els = document.getElementsByTagName('input');
for (var i=0; i<els.length; i++) {
    els[i].id = 'selected_id-'+i;
}

如果你想要更精确的东西，即使没有jQuery（但使用not too old browser），你也可以这样做：

var els = document.querySelectorAll('input[name="e_id[]"]');

Answer 2

您可以将所有<input>元素放入数组中。您遍历该数组，然后当您达到所需的数字时，将'select_id-'+(i)替换为'select_id-'+(i-1)。

以下是如何获取所有<input>元素的数组：

var myControls = document.getElementsByTagName('input');

然后你通过一个for（概念代码）：

for (var i = 1; i < [length of myControls]; i++) { 
    if (this_id's_number < i) {
        continue;
    } else if (this_id's_number == i) {
        remove this input
    } else {
        current_number = getCurrentNumberFromID();

        current input's id = current_number -1;
    }
}

Answer 3

根据您的标记，可能有更好的方式来获取所有输入，例如，在给定容器中查找所有输入，但缺少此类信息，您仍然可以执行以下操作：

function updateIds() {

   var count = 0;

   var inputs = document.getElementsByTagName('input');
   for(var i = 0; l = inputs.length; i < l; i++) {
      if(inputs[i].name == 'e_id[]') {

         inputs[i].id = 'selected_id-' + (++count);

      }
   }

}

Answer 4

您可以在JavaScript中使用名为setAttribute()的方法。

JavaScript方式：

var elem = document.getElementById("selected_id-2"); 
elem.setAttribute("id", "selected_id-3");
elem.id = "selected_id-3";

jQuery Way：

$("#selected_id-2").attr("id", "selected_id-3");

Answer 5

你可以使用像

这样的DOM gymnatstic

document.getElementById("elementId").id.value="newId"

Answer 6

$("#selected_id-" + number_to_change).attr('id',"selected_id-"+(number_to_change-1));

动态更改ID

6 个答案:

JavaScript方式：

jQuery Way：