Клонирование формы с помощью jQuery

Question

У меня есть следующая форма

<div id="div1" style="margin-bottom:4px;" class="clon">  
      <span id ="display_input1">  
           Answer:<select name="Answer1" id="Answer1">                    
                     <option value='0'>Select Answer</option>  
                     <option value='1'>Excellent</option>  
                     option value='2'>Very Good</option>  
                  </select>  
      </span>  

      &nbsp; &nbsp;New Answer<input type="checkbox" id="Enable1" name="Enable1" value="1" onclick=display_inpt(this) />  

          &nbsp; &nbsp; <?  

            function dropdown($starting, $factor, $ending)      
            {

             echo "Point<select name=\"Mark1\" id=\"Mark1\">";  
             echo "<option value=\"\">Select Point</option>";  
             $i=$starting;  
             while($i >= $ending)  
             {  
                echo "<option value=\"$i\">$i</option>";  
                $i=$i-$factor;  
             }  
            echo "</select>";   
            }  

            dropdown(10, .5, -10);  
            ?>  
</div>  

    <input type="button" id="Add" value="Add Another Option" />

Я хочу клонировать весь div при каждом нажатии на кнопку «Добавить еще один вариант», чтобы результат был похож на

               <div id="div2" style="margin-bottom:4px;" class="clon">  
                <span id ="display_input2">  
                 Answer:<select name="Answer2" id="Answer2">

и так далее. Я попытался с помощью следующего кода JQuery для достижения этого

          $(document).ready(function() {
           $('#Add').click(function() {
            var num = $('.clon').length;

            var newNum  = new Number(num + 1);

            var newElem = $('#div' + num).clone().attr('id', 'div' + newNum);

            newElem.children(':eq(0)').attr('id', 'display_input' + newNum);
            newElem.children(':eq(1)').attr('id', 'Answer' + newNum).attr('name', 'Answer' + newNum);               
            newElem.children(':eq(2)').attr('id', 'Enable' + newNum).attr('name', 'Enable' + newNum).attr('value', newNum);
            newElem.children(':eq(3)').attr('id', 'Mark' + newNum).attr('name', 'Mark' + newNum);

но это не правильно, так как мне написать jquery-код для достижения этой цели?

Answer 1

Следующий пример jsfiddle делает то, что вы хотите: http://jsfiddle.net/nLJTP/

Я написал короткий фрагмент кода, который увеличивает идентификатор и имя всех элементов, имеющих класс «incrementNumbers»:

$(clonedElement).find('.increaseNumbers').each(function(){
        var oldId = $(this).attr('id');
        var oldName = $(this).attr('name');
        var regexp = new RegExp(/(.*?)(\d.*)/);

        if (oldId) {
            var matcher = oldId.match(regexp);
            var newId = matcher[1] + (parseInt(matcher[2]) + 1);
            $(this).attr('id', newId);
        }
        if (oldName) {
            var matcher = oldName.match(regexp);
            var newName = matcher[1] + (parseInt(matcher[2]) + 1);
            $(this).attr('name', newName);
        }        
});

Answer 2

Проверьте эту скрипку: http://jsfiddle.net/techfoobar/JwwkT/

Основой переименования идентификатора и имени является:

function doClone() {
    var old = $('.clon').length;
    var newC = old + 1;
    var cloned = $('.clon:first').clone();

    // add more element types as needed here
    cloned.find('p,input,select').each(function() {
        id = $(this).attr('id');
        name = $(this).attr('name')
        $(this).attr('id', id.substring(0, id.length-1) + newC).attr('name', name.substring(0, name.length-1) + newC);
    });

    // change the parent container as needed
    cloned.appendTo('body');
}

Возможное усовершенствование - передача селектора, нового индекса и родительского контейнера в качестве аргументов вышеупомянутой функции. Например:

doClone('.clon:first', $('.clon').length+1, 'body');