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

Question

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

我期望发生的事情：
我希望在下面的代码中发生的是，更新 .duplicate 值（假设为 3），克隆 .target 元素，然后清空 .wrap 元素，然后循环运行并附加存储在 $clone 中的 3 个克隆。最后的 .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

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

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

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

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

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

jQuery cloned element is only appending the cloned item once inside of a loop

javascript

jquery

clone

append