如何克隆div低音选择选项

Question

我有带数字计数的选择选项，因此当用户通过此数字选择任何数字时，我现在需要克隆div标签个人信息，例如：-选择8个克隆8次..

我尝试通过use（for loop）来做到这一点，但是我在运行时遇到问题，我看到克隆超过了这个数字，例如：-选择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>