Question

我已经制作了一个模板（一组html标签，可能是textarea或输入类型）我想要克隆模板。我想通过在克隆时替换数字来重命名每个元素的'name'和'id'属性。我更愿意使用正则表达式来做到这一点。

我想遍历所有Html元素并重命名新元素的属性。 e.g。

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();
    }

如何克隆cakephp元素的元素

2 个答案: