如何为cakephp元素克隆元素

Question

我已经制作了一个模板（一组一堆html标记，可能是文本区域或输入类型），我想克隆该模板。 我想通过在克隆时替换数字来重命名每个元素的“名称”和“ id”属性。 我喜欢使用正则表达式来做到这一点。

我想遍历所有HTML元素并重命名新元素的属性。 例如

id="extrainfofiles-0-extrainfofile-extra-info-file-type-id"
for="extrainfofiles-0-extrainfofile-extra-info-file-type-id"
name="ExtraInfoFiles[0][ExtraInfoFile][extra_info_file_type_id]"

至：

id="extrainfofiles--566345634-extrainfofile-extra-info-file-type-id"
for="extrainfofiles--566345634-extrainfofile-extra-info-file-type-id"
name="ExtraInfoFiles[-566345634][ExtraInfoFile][extra_info_file_type_id]"

请帮忙。

这是JsFiddle： https ://jsfiddle.net/isaacrajaei/133ko1un/

Answer 1

$('#extrainfo-files').on('click', '.extrafile-add', function(){

    // Create the new row
    var $fileList = $('.file-list-extrainfo');
    var $template = $('.extrainfo-file-template').clone();

    var rowId = '-' + (new Date).getTime();
    $template.removeClass('extrainfo-file-template hide').attr('data-id', rowId);

    $template.find('[name*="[0]"], [id*="-0-"], [for*="-0-"]').attr({
                "name" : function(int, input){
                    if (input != null){
                        return input.replace('[0]', '[' + rowId + ']');
                    }
                },
                "id" : function(int, input){
                    if (input != null){
                        return input.replace('-0-', '-' + rowId + '-');
                    }
                },
                "for" : function(int, input){
                    if (input != null){
                        return input.replace('-0-', '-' + rowId + '-');
                    }
                },
                "value" : ""
    }).end();


    $template.appendTo($fileList);

});

Answer 2

/**
 * Add A File
 */
$('#extrainfo-files').on('click', '.extrafile-add', function(){

    // Create the new row
    var $fileList = $('.file-list-extrainfo');
    var $template = $('.extrainfo-file-template').clone();

    var rowId = '-' + (new Date).getTime();
    $template.removeClass('extrainfo-file-template hide').attr('data-id', rowId);

    // Append the new row to the list
    $template.appendTo($fileList);

    // Rename the attributes 
    var $row = $('.file-row[data-id="' + rowId + '"]');
    updateElements($row.selector, 0, rowId);

});


function updateElements(el, from, to)
    {
        $(el).find('[name*="['+from+']"], [id*="-'+from+'-"], [for*="-'+from+'-"]').attr({
            "name" : function(int, input){
                if (input != null){
                    return input.replace('['+from+']', '[' + to + ']');
                }
            },
            "id" : function(int, input){
                if (input != null){
                    return input.replace('-'+from+'-', '-' + to + '-');
                }
            },
            "for" : function(int, input){
                if (input != null){
                    return input.replace('-'+from+'-', '-' + to + '-');
                }
            },
            "value" : ""
        }).end();
    }