我正在使用以下脚本来克隆一个带有表单元素的div;但是,它当前正确地将顺序号(1,2,3)添加到容器div id,但是然后将“name2”和“name3”添加到克隆中的子div,而不是实际的表单元素。
问题示例:
<div class="clonedInput" id="container1">
<div>First Name:
<input type="text" id="first_name1" name="first_name1">
</div>
<div>Last Name:
<input type="text" id="last_name1" name="last_name1">
</div>
<div>Phone:
<input type="text" id="phone1" name="phone1">
</div>
</div>
<div class="clonedInput" id="container2">
<div id="name2" name="name2">First Name:
<input type="text" id="first_name1" name="first_name1">
</div>
<div>Last Name:
<input type="text" id="last_name1" name="last_name1">
</div>
<div>Phone:
<input type="text" id="phone1" name="phone1">
</div>
</div>
<div class="clonedInput" id="container3">
<div id="name3" name="name3">First Name:
<input type="text" id="first_name1" name="first_name1">
</div>
<div>Last Name:
<input type="text" id="last_name1" name="last_name1">
</div>
<div>Phone:
<input type="text" id="phone1" name="phone1">
</div>
</div>
完整代码:
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
jQuery( function ( $ ) {
$( '#btnAdd' ).click( function() {
var num = $( '.clonedInput' ).length; // how many "duplicatable" input fields we currently have
var newNum = new Number( num + 1 ); // the numeric ID of the new input field being added
var newElem = $( '#container' + num ).clone().attr( 'id', 'container' + newNum );
newElem.children( ':first' ).attr( 'id', 'name' + newNum ).attr( 'name', 'name' + newNum );
$( '#container' + num ).after( newElem );
$( '#btnDel' ).attr( 'disabled', false );
if ( newNum == 25 )
$( '#btnAdd' ).attr( 'disabled', 'disabled' );
});
$( '#btnDel' ).click( function() {
var num = $( '.clonedInput' ).length; // how many "duplicatable" input fields we currently have
$( '#container' + num ).remove(); // remove the last element
$( '#btnAdd' ).attr( 'disabled', false ); // enable the "add" button
// if only one element remains, disable the "remove" button
if ( num-1 == 1 )
$( '#btnDel' ).attr( 'disabled', 'disabled' );
});
$( '#btnDel' ).attr( 'disabled', 'disabled' );
});
</script>
</head>
<body>
<form id="myForm">
<div id="container1" class="clonedInput">
<div>
First Name:
<input type="text" name="first_name1" id="first_name1">
</div>
<div>
Last Name:
<input type="text" name="last_name1" id="last_name1">
</div>
<div>
Phone:
<input type="text" name="phone1" id="phone1">
</div>
</div>
<div>
<input type="button" id="btnAdd" value="add another name" />
<input type="button" id="btnDel" value="remove name" />
</div>
</form>
</body>
</html>
答案 0 :(得分:1)
var cloneEl = (function () {
var counter = 1;
return function cloneEl(id) {
var el = document.getElementById("container");
var clone = el.cloneNode(true);
clone.id = el.id+counter;
[].forEach.call(clone.children, function (node, key) {
var oldNode = el.children[key];
node.id = oldNode.id+counter;
node.name = oldNode.id+counter;
});
counter++;
return clone;
};
})();
答案 1 :(得分:1)
问题是这一行:
newElem.children( ':first' ).attr( 'id', 'name' + newNum ).attr( 'name', 'name' + newNum );
仅选择每个newElem
的第一个子节点,这就是为什么只更改第一个输入元素的原因。你想要做的是选择所有输入元素的子项。试试这个:
newElement.children('input').attr('id',$(this).attr('id') + newNum).attr('name',$(this).attr('name') + newNum);
答案 2 :(得分:1)
这就是我的工作:如果你有多层div,表格(像我一样),你必须将Brian Glaz提供的代码从newElem.children更改为newElem.find。这是他的小提琴:http://jsfiddle.net/B7bgN/10/
我所做的就是改变一个词。从小孩到找。 (孩子们只会遍历一个级别,而发现会得到每个元素的后代。
http://jsfiddle.net/the7th/sSS3c/1/
$(document).ready(function () {
var newNum = 1;
cloneMe = function (el) {
var newElem = el.clone().attr('class', 'firstrow' + newNum).insertAfter(".firstrow0");
newElem.find('input').each(function (index, elem) {
$(elem).attr('id', $(elem).attr('id') + newNum).attr('name', $(elem).attr('name') + newNum);
});
if (newNum == 2) {
$("#cloneb").hide();
};
newNum++;
};
});
答案 3 :(得分:0)
虽然不是OP问题的解决方案,但我发现Jquery Form Clone Plugin非常有帮助。它有所有预置,索引,嵌套表单,控件甚至回调,如beforeAdd,添加后等我提到它,因为在搜索jQuery的解决方案时,我最终在这里。所以我认为这可能有助于其他人搜索jQuery的克隆表单解决方案