克隆 div 并递增

Question

我正在尝试克隆一个 div（多次）并添加增量，以便我可以使用 XML 将结果解析到数据库中。我只想克隆表单部分而不是输入的数据。我正在克隆的 div 有 3 个选择和 2 个单选（添加时所有这些都需要为空）。

HTML

<div id="Template1" class="template">
    <div class="_100">
              <div class="_25"> <fieldset>   
<label class="label_analysis" for="analysis">Analyte:</label>
        <select class="select_analyte" name="analysis" id="analysis">
        <option value="">Select</option>
               <option value="TN">TN</option>
               <option value="TP,NO2+3">TP,NO2+3</option>
               </select>  </fieldset></div>
              <div data-role="controlgroup" class="_13">
          <label><input type="checkbox" data-mini="true" name="Filtered" id="Filtered" value="True">
              0.45u Filtered</label>
              <label><input type="checkbox" data-mini="true" name="Dup" id="Dup" value="True">
              Field Dup</label></div>

      <div class="_25"><fieldset>
          <label class="label_preserve" for="preserve">Preserved</label>
        <select class="select_preserve" name="preserve" id="preserve">
            <option value="">Select</option>
            <option value="HNO3">HNO&#8323;</option>
            <option value="H2SO4">H&#8322;SO&#8324;</option>
         </select></fieldset></div> 
    <div class="_20"> <fieldset> 
   <label class="label_cool" for="cool">Cooled</label>
        <select class="select_cool" name="cool" id="cool">  
            <option value="">Select</option>
               <option value="Ice">Ice</option>
               <option value="Frozen">Frozen</option>
               <option value="None">None</option>
            </select>
        </fieldset></div>

    <div class="_13">
        <a href="#" type="button" data-theme="e" data-mini="true" data-icon="add" title="Duplicate" class="showNew">Add Analyte</a>
        <a href="#" type="button" data-theme="e" data-mini="true" data-icon="delete" title="Remove" class="removeNew">Remove</a></div>
       </div>
    </div>
           <div id="place" class="place"></div>

我尝试了两种不同的脚本

这个脚本的工作原理是我想隐藏原始 div 上的删除按钮，只让它出现在克隆的上，但它不会增加。

     (function($){
    var Template = $('.Template');
    var count = 0;
    $('.removeNew').hide().on('click', function(e) {
        e.preventDefault();
        $(this).closest('.Template').remove();
    });
    $('a.showNew').on('click', function(e) {
        e.preventDefault();
        var clone = Template.clone(true, true).insertAfter("#place").find('.removeNew').show().end();

    });
})(jQuery);

这个增加但不隐藏删除按钮

      $('#showNew').click(function() {
      var num = $('.template').length,
      newNum = new Number(num + 1),
      newElem = $('#Template' + num).clone(true, true).attr('id', 'Template' + newNum).appendTo('#place');
      newElem.find('.analysis').attr('id', 'ID' + newNum + '_analysis').attr('name', 'ID' + newNum + '_analysis').val();
      newElem.find('.preserve').attr('id', 'ID' + newNum + '_preserve').attr('name', 'ID' + newNum + '_preserve').val();
      newElem.find('.cool').attr('id', 'ID' + newNum + '_cool').attr('name', 'ID' + newNum + '_cool').val();
    $('#Template'+ num).after(newElem);
   });
 })

我想知道是否有某种方法可以将它们结合起来......

我也有问题，因为无论我尝试什么，原来的 div 都变成了克隆，带有删除按钮，而应该是原来的 div 可以更改。

Answer 1

我相信最简单的方法是隐藏模板的原始副本并以此为基础所有克隆。这个fiddle 演示了这种方法。

(function ($) {
    var Template = $('#Template');
    var count = 0;
    var nextId = 0;

    Template.find('.removeNew').on('click', function (e) {
        e.preventDefault();
        $(this).closest('.template').remove();
        count--;
    });

    function cloneTemplate(removable) {
        var clone = Template.clone(true, true);
        clone.attr('id', clone.attr('id') + nextId);

        clone.find('label[for]').each(function( index ) {
            var elem = $(this);
            elem.attr('for', elem.attr('for') + nextId);
        });

        clone.find('select, input').each(function( index ) {
            var elem = $(this);
            elem.attr('id', elem.attr('id') + nextId);
            elem.attr('name', elem.attr('name') + nextId);
        });

        if (!removable) {
            clone.find('.removeNew').remove();
        }

        clone.insertBefore("#addNew").removeClass('hide');
        count++;
        nextId++;
    }

    // Create First Analyte and delete the remove button.
    cloneTemplate(false);

    $('a.showNew').on('click', function (e) {
        e.preventDefault();
        cloneTemplate(true);
        return false;
    });
})(jQuery);

将Add New 按钮放在模板内没有意义，所以我将它移到了外面。所有新克隆都添加在Add New 按钮之前。

您应该注意到在上面的脚本中，第一个元素是通过克隆Template 创建的。然后在单击Add New 按钮时调用相同的clone 函数创建新元素。

注意：此解决方案不包括更新元素id 或name 属性。你几乎肯定想做的事情。