javascript - 创建输入元素继续 ID 枚举

Question

我有一个按钮，单击后会在 DIV 内创建 4 个输入元素:

<div id="content"></div>
<button class="check">Check</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
    var num = 4;
    $(".check").click(function(){
        for(i=0; i<num;i++){
            $("#content").append("<input id='input"+i+"' type='text'><br>");
        }
    });
</script>

但问题是我希望输入 ID 号继续枚举(如本例所示)而不是返回零:

<div id="content">
<input id="input0" type="text">
<input id="input1" type="text">
<input id="input2" type="text">
<input id="input3" type="text">
<input id="input4" type="text">
<input id="input5" type="text">
<input id="input6" type="text">
<input id="input7" type="text">
...and continues
</div>

如何修复它？

Answer 1

您可以检查最后一个输入的id。在这里，我根据 #container 中的元素总数计算 for 循环的开始和结束。

var num = 4;
$(".check").click(function() {

  var start = $("#content input").length;
  var end = start + num;

  for (i = start; i < end; i++) {
    var id = 'input' + i;
    $("#content").append("<input id='"+id+"' type='text' value='"+id+"'><br>");
    
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content"></div>
<button class="check">Check</button>

PS:这里输入的值只是为了演示输入的id设置。