Javascript 在 jquery 中克隆后更改各种 id
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2977041/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing various id's after cloning in jquery
提问by rshivers
I'm trying to clone a table row and update the multiple id's to reflect the input fields. I start by doing this and it works:
我正在尝试克隆一个表行并更新多个 id 以反映输入字段。我首先这样做并且它有效：
$(id).clone().attr("id", "newId");
That changes the id of my main table row to the new id. In the table row I have other id's that need to be changed. For example:
这会将我的主表行的 id 更改为新的 id。在表格行中，我还有其他需要更改的 ID。例如：
<input type="text" id="input_1">
Will be changed to:
将改为：
<input type="text" id="input_2">
I thought it would be something like this to change the id's:
我认为更改 id 会是这样的：
$(id).clone().attr("id", "newId").("#input_1").attr("id", "input_2");
This doesn't work. How can I fix this so that all of the id's change?
这不起作用。我该如何解决这个问题，以便所有的 id 都发生变化？
回答by user113716
The program will crash as you have it since you're missing a function call.
由于您缺少函数调用，程序将在您拥有它时崩溃。
Try this instead. Notice the call to find():
试试这个。注意调用find()：
$(id).clone().attr("id", "newId").find("#input_1").attr("id", "input_2");
It will probably be better to reference the clone in a variable first.
首先在变量中引用克隆可能会更好。
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");
You can set the ID attributes one at a time for the descendants of your clone if you wish. If there are several, and if you have a consistent pattern for IDs, you will likely be able to do something a little more automated.
如果您愿意，您可以一次为克隆的后代设置一个 ID 属性。如果有多个，并且您有一致的 ID 模式，则您可能能够做一些更自动化的事情。
EDIT:
编辑：
Here's an exampleof automatically updating all the IDs in the $clone.
下面是一个例子的自动更新在所有的ID $clone。
Please note that this may not work for you, as it assumes that allthe IDs end with a number.
请注意，这可能对您不起作用，因为它假定所有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);
});
回答by Mark Schultheiss
I have found when I do a lot of .clone() stuff it is better to use a class rather than an id attribute. This way you can clone, yet reference it by a known entity (the class), and still get unique via an index into the element group via an .eq()
我发现当我做很多 .clone() 东西时，最好使用类而不是 id 属性。通过这种方式，您可以克隆，但由已知实体（类）引用它，并且仍然通过 .eq() 通过元素组的索引获得唯一
回答by Piyush Balapure
I have created a generalised solution. The function below will change ids and names of cloned object. In most cases, you will need the row number so Just add "data-row-id" attribute to the object.
我已经创建了一个通用的解决方案。下面的函数将更改克隆对象的 id 和名称。在大多数情况下，您将需要行号，因此只需向对象添加“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;
}
