使用 jQuery 复制元素

Question

我正在为我的组织创建一个可重复使用的表单脚本。一项功能是复制表单元素。对于这种情况，我要求提供活动日期，但可以选择在活动中添加一天。

HTML

<ul>
    <li>
        <label>Date of event<sup>*</sup></label>
        <input class="field-required" type="text" name="event_date" readonly="readonly" />
    </li>           
    <li>
        <ul class="float-fields">
            <li>
                <label>Start time<sup>*</sup></label>
                <input class="field-required" type="text" name="event_start_time" data-validation="time" />
            </li>
            <li>
                <label>End time<sup>*</sup></label>
                <input class="field-required" type="text" name="event_end_time" data-validation="time" />
            </li>
        </ul>
    </li>

    <a class="duplicate-fields" data-fields="all">&plus; Add date</a>
</ul>

JavaScript (jQuery)

    //duplicate fields
    $('.duplicate-fields').each(function() {

        //put fields in a variable
        if($(this).attr('data-fields') == 'all') {
            var html = $(this).parent('ul').html();
        }

        $(this).click(function() {
            $($(this).parent('ul')).append(html);
        })

    });

现在所做的是复制 ul（所有 li）的 html 并附加它，正如您所期望的那样。我需要做的是排除'.duplicate-fields'链接，使链接不重复，并在现有链接上方插入li。

我喜欢 .clone() 可以做的事情，但我需要将它放在一个变量中，以便我可以复制不定数字的字段。有了克隆，我可以说：

var html = $(this).parent('ul').clone();
$(html).find('.duplicate-fields').remove();

但据我了解，如果我使用 clone()，我只能复制一次。 关于我应该如何做到这一点的任何建议？这是可重复使用的，因为只需要编辑 HTML 以供将来使用（没有特殊的类或 id）。

Answer 1

尝试使用 for 循环迭代克隆。

更新代码：

 $('.duplicate-fields').each(function () {
     if ($(this).attr('data-fields') == 'all') {
         var noOfClones = 5;
         var el = $(this).parent();
         for (var i = 0; i < noOfClones; i++) {
             var html = el.clone();
             html.appendTo('body');            
         }
     }
 });

最后，当a标签被点击时

$(document).on('click', '.duplicate-fields', function () {
    var noOfClones = 5;  //you can change it to repeatitve times
    var el = $(this).parent();
    for (var i = 0; i < noOfClones; i++) {
        var html = el.clone();
        html.find('a.duplicate-fields').remove(); //remove the a tag in cloned objects
        html.appendTo('body'); //append back
    }
});

JSFiddle

Answer 2

这个怎么样？

//duplicate fields
$('.duplicate-fields').each(function() {
    //put fields in a variable
    if($(this).attr('data-fields') == 'all') {
        var html = $(this).parent('ul').find('li:not(:has(ul.float-fields))').html(); 
        html += $(this).parent('ul').find('li:has(ul.float-fields)').html();
    }

    $(this).click(function() {
        $(this).before(html);
    })

});

Answer 3

根据 User3013738 的回答，这对我有用。

    //duplicate fields
    var html = '';
    $('.duplicate-fields').each(function() {
        //put fields in a variable
        if($(this).attr('data-fields') == 'all') {
            $(this).parent('ul').find('li:not(li li)').each(function() {
                html += '<li>' + $(this).html() + '</li>';
            });
        }

        $(this).click(function() {
            $(this).before(html);
        })

    });