Изменение различных идентификаторов после клонирования в jquery

Я пытаюсь клонировать строку таблицы и обновлять несколько идентификаторов, чтобы отобразить поля ввода. Я начинаю с этого, и он работает:

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

Это изменяет идентификатор моей основной строки таблицы на новый идентификатор. В строке таблицы у меня есть другой идентификатор, который нужно изменить. Например:

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

Будет изменено на:

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

Я думал, что это изменит идентификатор:

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

Это не работает. Как я могу исправить это, чтобы все идентификаторы менялись?

Ответ 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");

Вы можете установить атрибуты идентификатора по одному для потомков вашего клона, если хотите. Если их несколько, и если у вас есть последовательный шаблон для идентификаторов, вы, вероятно, сможете сделать что-то более автоматизированное.

EDIT:

Здесь приведен пример автоматического обновления всех идентификаторов в $clone.

Обратите внимание, что это может не сработать для вас, так как предполагается, что все идентификаторы заканчиваются номером.

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

Ответ 2

Я создал обобщенное решение. Функция ниже изменит идентификаторы и имена клонированного объекта. В большинстве случаев вам понадобится номер строки, поэтому просто добавьте к объекту атрибут "data-row-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;
}

Ответ 3

Я обнаружил, что, когда я делаю много .clone(), лучше использовать класс, а не атрибут id. Таким образом, вы можете клонировать, но ссылаться на него с помощью известного объекта (класса) и по-прежнему становиться уникальным с помощью индекса в группу элементов с помощью .eq()