javascript - 如何克隆 div 低音选择选项

Question

我有选择包含数字计数的选项，所以当用户选择任何数字时我现在需要通过该数字克隆 div 标签个人信息，例如: - 选择 8 克隆 8 次..

我尝试通过使用(for循环)来做到这一点，但是我在运行时遇到问题，我看到克隆超过了这个数字，例如:-选择8克隆16次

这是html代码和我的尝试js代码

$('#c3').change(function() {
  $('.cloneHere').empty();

  var count = $('#c3').val();
  for (i = 1; count > i; i++) {
    var clone = $('.rowClone').clone();

    $('.cloneHere').append(clone);


  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='col-xs-3'>
  <label for="">count of person</label>
  <select class='form-control select2' name="" id="c3">
    <option value="" selected disabled hidden>Choose here</option>
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
     <option value="4">4</option>
     <option value="5">5</option>
     <option value="6">6</option>
     <option value="7">7</option>
  </select>
</div>
</div>




</div>
</div>


</div>

</div>


<div class='col-md-12'>
  <div class='box box-primary'>
    <div class='box-header with-border'>
      <h3 class='box-title'>Information of Person</h3>
    </div>

    <div class='form-group'>
      <div class='box-body rowClone2'>
        <div class=' row'>
          <div class=' col-sm-3'><label for="">Person 1</label></div>
        </div>
        <div class='row rowClone'>

          <div class='col-xs-6 col-md-3'>
            <input type="text" class="form-control">
          </div>
          <div class='col-xs-6 col-md-3'>

            <input type="text" class="form-control">
          </div>

          <div class='col-xs-6 col-md-3'>

            <input type="tel" class="form-control">
          </div>

          <div class='col-xs-6 col-md-3'>

            <input type="text" class="form-control">
          </div>


        </div>
        <br>
        <div class="row cloneHere">


        </div>


      </div>

Answer 1

您面临的问题来自这一行:var clone = $('.rowClone').clone();

第一个克隆很好，因为只有 1 .rowClone存在，下次多个 .rowClone存在并附加所有这些。

您有 2 个解决方案，要么使用 var clone = $('.rowClone:first').clone();或移动var clone = $('.rowClone').clone();在您的for loop之前

问题演示，运行它并查看控制台

$('#c3').change(function() {
  $('.cloneHere').empty();

  var count = $('#c3').val();
  for (i = 1; count > i; i++) {
    console.log("Number of .rowClone that exist = " + $('.rowClone').length)
    var clone = $('.rowClone').clone();
    $('.cloneHere').append(clone);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='col-xs-3'>
  <label for="">count of person</label>
  <select class='form-control select2' name="" id="c3">
    <option value="" selected disabled hidden>Choose here</option>
    <option value="8">8</option>

  </select>
</div>


<div class='col-md-12'>
  <div class='box box-primary'>
    <div class='box-header with-border'>
      <h3 class='box-title'>Information of Person</h3>
    </div>

    <div class='form-group'>
      <div class='box-body rowClone2'>
        <div class=' row'>
          <div class=' col-sm-3'><label for="">Person 1</label></div>
        </div>
        <div class='row rowClone'>

          <div class='col-xs-6 col-md-3'>
            <input type="text" class="form-control">
          </div>
          <div class='col-xs-6 col-md-3'>

            <input type="text" class="form-control">
          </div>

          <div class='col-xs-6 col-md-3'>

            <input type="tel" class="form-control">
          </div>

          <div class='col-xs-6 col-md-3'>

            <input type="text" class="form-control">
          </div>


        </div>
        <br>
        <div class="row cloneHere">


        </div>


      </div>

    </div>


  </div>

</div>