javascript - jQuery 克隆元素仅在循环内 append 一次克隆项

Question

我正在尝试根据数字字段的数字输入克隆一组文本。看来我得到的代码只是将项目一次 append 到 .wrap 中元素。 .clone() 有限制吗？或者我忽略的其他东西只会 append 一次该项目？

我期望发生的事情:
我希望在下面的代码中发生的是 .duplicate值已更新(假设为 3)，.target元素被克隆，然后是 .wrap元素被清空，循环运行并 append 存储在 $clone 中的 3 个克隆.决赛.wrap元素应包含 3 <h2>Target</h2>元素。

发生了什么:
上面似乎发生了，但最后只有 1 <h2>Target</h2>元素 append 到 .wrap元素。

代码:

$( 'body' ).change( '.duplicate', function() {
	
  var count  = $( '.duplicate' ).val(),
      $clone = $( '.target' ).clone(),
      i      = 1;

  $( '.wrap' ).html( '' );

  while ( i <= count ) {

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

    i++;

  }

} );

.duplicate {
  width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<input type="number" class="duplicate" value="1" min="1" max="5">

<div class="wrap">
  <div class="target">
    <h2>Target</h2>
  </div>
</div>

Answer 1

每次迭代都需要一个新的克隆，否则每次都只是简单地移动原始的

此外，一旦您拥有多个此类，您只想克隆其中一个

 $clone = $( '.target' ).first().clone()

 while ( i <= count ) {
     $( '.wrap' ).append( $clone.clone() );