jquery中動態創建元素的編號

Question

我正在嘗試通過一個按鈕創建元素（在這種情況下是選擇器），同時還可以通過另一個按鈕刪除它們：

$(document).ready(function() {
    var max_fields      = 10;
    var wrapper         = $(".container1");
    var add_button      = $(".add_form_field");

    var x = 1;
    $(add_button).click(function(e){
      e.preventDefault();
      if(x < max_fields){
         x++;
        $(wrapper).append('<div> <fieldset class= "field1"> <select class= "selector1" name="selector*[add numeration here]*"> </select> </fieldset>  <a href="#" class="delete">Delete</a>   </div>'); //add selector box
      }
      else
      {
        alert('You Reached the limits')
      }
      });
      $(wrapper).on("click",".delete", function(e){e.preventDefault(); $(this).parent('div').remove(); x--
        ;})
});

我不知道如何通過 var x 動態計算從 1 到 10 的選擇器名稱。 任何幫助將非常感激！

Answer 1

你可以像name="selector' + x + '" ，但問題是如果我刪除 1. 計數會發生什么？

筆記：

if (x < max_fields) {目前只允許你制作 9，所以如果你想制作 10，請使用if (x <= max_fields) {

我還將x++移到 if 語句的末尾，因此它直到最后才增加數字。

演示

 $(document).ready(function() { var max_fields = 10; var wrapper = $(".container1"); var add_button = $(".add_form_field"); var x = 1; $(add_button).click(function(e) { e.preventDefault(); var s = FindNext(); if (s > 0) { $(wrapper).append('<div> <fieldset class= "field1"> <select class= "selector1" name="selector' + s + '"> </select> </fieldset> <a href="#" class="delete">Delete</a> </div>'); x++; } else { alert('You Reached the limits') } }); $(wrapper).on("click", ".delete", function(e) { e.preventDefault(); $(this).parent('div').remove(); x--; }) function FindNext() { for (var i = 1; i < max_fields; i++) { if ($('select[name="selector' + i + '"]').length == 0) { return i; } } return 0; } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="add_form_field">add</button> <div class="container1"></div>