Javascript 更改各种id'；在jquery中克隆后的

我试图克隆一个表行并更新多个id以反映输入字段。我从这样做开始，它起作用了：

$(id).clone().attr("id", "newId");

这会将主表行的id更改为新id。在表行中，我有其他需要更改的id。例如：

<input type="text" id="input_1">

---

这不管用。如何修复此问题以使所有id都发生更改

由于缺少一个函数调用，程序将在运行时崩溃

试试这个。注意调用

find（）

：

最好先在变量中引用克隆

var $clone = $(id).clone();

$clone.attr("id", "newId").find("#input_1").attr("id", "input_2");
$clone.find("#someElement").attr("id","someElement_2");
$clone.find("#someOtherElement").attr("id","someOtherElement_2");

如果愿意，可以为克隆的后代一次设置一个ID属性。如果有几个，并且您有一个一致的ID模式，那么您很可能能够做一些自动化程度稍高的事情

---

编辑：

下面是一个自动更新

$clone

中所有ID的示例

请注意，这可能不适用于您，因为它假定allID以数字结尾

var $clone = $(id).clone();    // Create your clone

      // Get the number at the end of the ID, increment it, and replace the old id
$clone.attr('id',$clone.attr('id').replace(/\d+$/, function(str) { return parseInt(str) + 1; }) ); 

     // Find all elements in $clone that have an ID, and iterate using each()
$clone.find('[id]').each(function() { 

     //Perform the same replace as above
    var $th = $(this);
    var newID = $th.attr('id').replace(/\d+$/, function(str) { return parseInt(str) + 1; });
    $th.attr('id', newID);
});

---

我发现，当我做很多.clone（）的工作时，最好使用类而不是id属性。通过这种方式，您可以克隆，但通过已知实体（类）引用它，并且仍然可以通过.eq（）通过索引将其唯一化到元素组中。

我创建了一个通用解决方案。下面的函数将更改克隆对象的ID和名称。在大多数情况下，您需要行号，因此只需向对象添加“数据行id”属性即可

function renameCloneIdsAndNames( objClone ) {

    if( !objClone.attr( 'data-row-id' ) ) {
        console.error( 'Cloned object must have \'data-row-id\' attribute.' );
    }

    if( objClone.attr( 'id' ) ) {
        objClone.attr( 'id', objClone.attr( 'id' ).replace( /\d+$/, function( strId ) { return parseInt( strId ) + 1; } ) );
    }

    objClone.attr( 'data-row-id', objClone.attr( 'data-row-id' ).replace( /\d+$/, function( strId ) { return parseInt( strId ) + 1; } ) );

    objClone.find( '[id]' ).each( function() {

        var strNewId = $( this ).attr( 'id' ).replace( /\d+$/, function( strId ) { return parseInt( strId ) + 1; } );

        $( this ).attr( 'id', strNewId );

        if( $( this ).attr( 'name' ) ) {
            var strNewName  = $( this ).attr( 'name' ).replace( /\[\d+\]/g, function( strName ) {
                strName = strName.replace( /[\[\]']+/g, '' );
                var intNumber = parseInt( strName ) + 1;
                return '[' + intNumber + ']'
            } );
            $( this ).attr( 'name', strNewName );
        }
    });

    return objClone;
}

---

我以前尝试过使用find（），并且能够更改其中一个属性，但其他属性不会更改。我被告知这是因为下次使用find时，它认为下一个元素位于同一个id内。因此，如果我有3个id要更改，使用find会更改第一个id，但其他id保持不变。@rshivers-这就是我将克隆存储在变量中的原因。它存储您克隆的整个结构，因此您可以对

$clone

执行其他

find（）

调用。同样，如果您有几个要更新，可能有一种方法比一次更新一个更快。您可以更改

$clone.attr（'id'，$clone.attr（'id'）。替换（/\d+$/，function（str）{return parseInt（str）+1；}）

到

$clone.attr（'id'，函数（i，attr）{return attr.replace（/\d+$/，函数（str）{return parseInt（str）+1；}）@azatoth-很好。函数可以作为第二个参数传递给
attr（）
。更简洁。我不太了解正则表达式，但如果所有ID都是整数，而不是文本+数字，则：/\d+$/将失败。你知道怎么修吗？
var $clone = $(id).clone();

$clone.attr("id", "newId").find("#input_1").attr("id", "input_2");
$clone.find("#someElement").attr("id","someElement_2");
$clone.find("#someOtherElement").attr("id","someOtherElement_2");

var $clone = $(id).clone();    // Create your clone

      // Get the number at the end of the ID, increment it, and replace the old id
$clone.attr('id',$clone.attr('id').replace(/\d+$/, function(str) { return parseInt(str) + 1; }) ); 

     // Find all elements in $clone that have an ID, and iterate using each()
$clone.find('[id]').each(function() { 

     //Perform the same replace as above
    var $th = $(this);
    var newID = $th.attr('id').replace(/\d+$/, function(str) { return parseInt(str) + 1; });
    $th.attr('id', newID);
});

function renameCloneIdsAndNames( objClone ) {

    if( !objClone.attr( 'data-row-id' ) ) {
        console.error( 'Cloned object must have \'data-row-id\' attribute.' );
    }

    if( objClone.attr( 'id' ) ) {
        objClone.attr( 'id', objClone.attr( 'id' ).replace( /\d+$/, function( strId ) { return parseInt( strId ) + 1; } ) );
    }

    objClone.attr( 'data-row-id', objClone.attr( 'data-row-id' ).replace( /\d+$/, function( strId ) { return parseInt( strId ) + 1; } ) );

    objClone.find( '[id]' ).each( function() {

        var strNewId = $( this ).attr( 'id' ).replace( /\d+$/, function( strId ) { return parseInt( strId ) + 1; } );

        $( this ).attr( 'id', strNewId );

        if( $( this ).attr( 'name' ) ) {
            var strNewName  = $( this ).attr( 'name' ).replace( /\[\d+\]/g, function( strName ) {
                strName = strName.replace( /[\[\]']+/g, '' );
                var intNumber = parseInt( strName ) + 1;
                return '[' + intNumber + ']'
            } );
            $( this ).attr( 'name', strNewName );
        }
    });

    return objClone;
}