jQuery克隆元素仅在循环内附加一次克隆项目

Question

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

我期望会发生什么：
我期望在下面的代码中发生的是，.duplicate 值被更新（假设为 3），.target 元素被克隆，然后.wrap 元素被清空，循环运行并附加 3 个克隆存储在$clone。最后的 .wrap 元素应该包含 3 个 <h2>Target</h2> 元素。

发生了什么：
以上似乎发生了，但最后只有 1 个 <h2>Target</h2> 元素附加到 .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() );