Question

我正在尝试克隆表格行并更新多个ID以反映输入字段。我开始这样做，它的工作原理：

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

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

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

将更改为：

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

我认为改变id是这样的：

$(id).clone().attr("id", "newId").("#input_1").attr("id", "input_2");

这不起作用。我怎样才能解决这个问题，以便所有id的变化？

Answer 1

由于你错过了函数调用，程序会崩溃。

试试这个。请注意对find()的调用：

$(id).clone().attr("id", "newId").find("#input_1").attr("id", "input_2");

首先在变量中引用克隆可能会更好。

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的示例。

请注意，这可能不适合您，因为它假定所有 ID以数字结尾。

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

Answer 2

我发现当我做很多.clone（）时，最好使用类而不是id属性。通过这种方式，您可以克隆，然后通过已知实体（类）引用它，并通过.eq（）

通过索引进入元素组仍然是唯一的

Answer 3

我创建了一个通用的解决方案。下面的函数将更改克隆对象的ID和名称。在大多数情况下，您将需要行号，因此只需添加＆＃34; data-row-id＆＃34;属性到对象。

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

在jquery中克隆后更改各种id

3 个答案: