使用具有唯一ID的jQuery附加输入

Question

当我单击按钮jQuery时，在div内添加新输入，如下所示：

$('#addIndirectCityBtn').click(function () {
    var inputs = $("#additionalCityInputs input").length

    if (inputs <= 3) {
        $('#additionalCityInputs').append('<input type="text" placeholder="Miasto" class="form-control" style="margin-bottom: 5px;" />')
    }
})

如何为每个新输入添加uniqe ID？ 前一个例子是id =“ new1”，第二个是id =“ new2”，依此类推。

有任何想法吗？

Answer 1

$('#addIndirectCityBtn').click(function () {
    var inputs = $("#additionalCityInputs input").length

    if (inputs <= 3) {
        var newId = 'newId'+(inputs + 1);
        $('#additionalCityInputs').append('<input id="'+newId+'" type="text" placeholder="Miasto" class="form-control" style="margin-bottom: 5px;" />')
    }
})

Answer 2

尝试：

var counter = 0;
$('#addIndirectCityBtn').click(function () {
    var inputs = $("#additionalCityInputs input").length

    if (inputs <= 3) {
        $('#additionalCityInputs').append('<input id="new' + ++counter + '" type="text" placeholder="Miasto" class="form-control" style="margin-bottom: 5px;" />')
    }
})

Answer 3

使用IFFE

  (function(){
      var a = 0;
       $('#addIndirectCityBtn').click(function () {
        var inputs = $("#additionalCityInputs input").length

        if (inputs <= 3) {
            $('#additionalCityInputs').append('<input id="new'+ ++a + '" type="text" placeholder="Miasto" class="form-control" style="margin-bottom: 5px;" />')
        }
    })
    }());

Answer 4

使用一些计数器变量可实现此目的。

var i=0;
$('#addIndirectCityBtn').click(function () {
    var inputs = $("#additionalCityInputs input").length;
    i++;
    if (inputs <= 3) {
        $('#additionalCityInputs').append("<input id='new"+i+"' type='text' placeholder='Miasto' class='form-control' style='margin-bottom: 5px;' />");
    }
});