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

你需要某种全局变量，或者使用那么简单的变量：

var getID = (function () {
  var id = 0;
  return function () { return ++id; }
})();

因此，每当您致电getID()时，»internal«id将会递增，因此每次通话都会产生一个新ID。

Answer 2

您可以查看最后id的{{1}}。这里我根据input中的元素总数来计算for循环的开始和结束。

#container

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

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

Answer 3

＆＃13;

@TestConfiguration

＆＃13;

$(".check").click(function() {
  for(var i = 0; i < 4; i++) {
    $('<input type="text">')                            //create a new input
      .attr('id', 'input' + $('#content input').length) //id based on number of inputs
      .appendTo('#content');                            //append it to the container
  }
});

＆＃13;

Answer 4

如果你问如何将开始的元素堆叠起来，然后从那里继续枚举，你只需要将变量设置为最新元素的ID。

您需要做的就是计算元素的数量。这可以通过 .querySelectorAll() 和 .length 的组合来完成。

然后只需将您的循环开始置于此新值而不是0。

这可以在以下内容中看到：

var total_desired = 20;
var start = document.querySelectorAll('#content > input').length;

console.log(start + " elements to start with");

$(".check").click(function() {
  for (i = start; i < total_desired; i++) {
    $("#content").append("<input id='input" + i + "' type='text'><br>");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="check">Check</button>

<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>

话虽如此，您实际上不太可能需要同时ID <input>元素，而您可能会从类中受益。

Answer 5

您可以创建此对象：

BEGIN Algorithm(n)
    RETURN 1
END

并将其连接到字符串中。自动增加计数器。

var MyId = {
  a: 0,
  toString() {
    return this.a++;
  }
}

创建输入元素继续ID枚举

5 个答案: