Блог

Главная - Вопросы по программированию - как клонировать элемент с определенным количеством раз

как клонировать элемент с определенным количеством раз

#javascript #jquery

#javascript #jquery

Вопрос:

какой синтаксис для клонирования элемента с назначенным временем, например, 5 раз? Например, в html у меня есть этот элемент

 <div name="test">
     this is a test
</div>

и у меня есть эта кнопка клонирования, которая будет копировать элемент один раз, когда я его нажму. Тогда проблема в том, как я могу просто захотеть скопировать его 5 раз, что означает, что после пятого нажатия кнопки копирования я не смогу скопировать элемент и получить предупреждение типа «уже превышен максимум»? Заранее спасибо!

Ответ №1:

Ммм…

 .clone()

… и держите счетчик на количество раз, которое вы вызываете .clone() . Это очень просто.

Пример:

 var counter = 0;

function clonestuff(){
   if(counter < 5) {
      $(stuff).clone()...
      counter   ;
   } else {
      alert('sorry, excessive cloning detected!');
   }
}

http://api.jquery.com/clone/

Комментарии:

1. Если он это сделает, у него возникнут проблемы, ему нужно добавить идентификатор к этому элементу, если он возьмет элемент по имени и клонирует его, он будет клонировать множество элементов.

2. Ему просто нужен какой-то уникальный селектор, не обязательно идентификатор. #container div:last будет работать просто отлично.

Ответ №2:

JS Fiddle
http://jsfiddle.net/DXcQQ/22/

HTML

 <div id="content">
    <div name="test" id="item_0">
         this is a test
    </div>
</div>
<button id="btn">Click Me</button>

JS

 var maxRows = 5;
var i = 1;

$("#btn").click(function() {     
    if(i < maxRows) {
        $('#item_0').clone().attr("id","item_"   i  ).appendTo('#content');
    } else {
        alert('Max Rows Reached!')   
    }
});