jQuery клонированный элемент добавляет клонированный элемент только один раз внутри цикла - PullRequest
Новая
       24

jQuery клонированный элемент добавляет клонированный элемент только один раз внутри цикла

0 голосов
/ 17 ноября 2018

Я пытаюсь клонировать набор текста на основе числового ввода числового поля. Кажется, что полученный код добавляет элемент только один раз в элемент .wrap. Есть ли у меня ограничение на .clone() или что-то еще, что я пропускаю, и которое добавит элемент только один раз?

Чего я ожидаю:
В коде ниже я ожидаю, что значение .duplicate обновляется (скажем, 3), элемент .target клонируется, затем элемент .wrap очищается, и цикл запускается и добавляет 3 клона. хранится в $clone. Последний элемент .wrap должен содержать 3 <h2>Target</h2> элемента.

Что происходит:
Вышеприведенное, кажется, происходит, но в конце к элементу .wrap добавляются только 1 <h2>Target</h2> элементы.

Код: 

$( '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>

1 Ответ

0 голосов
/ 17 ноября 2018

Вам нужен новый клон на каждой итерации, в противном случае вы просто перемещаете оригинал каждый раз

Также, если у вас есть более одного из этого класса, вы хотите клонировать только один из них 

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

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