Question

我正在尝试克隆隐藏的div并显示使用新ID创建的新div。这似乎做了这个工作......

var newElem = $('#input1').clone().attr('id', 'input' + newNum).removeClass('clonedInput').addClass('ShowClones');

但div在第一个新div创建后停止创建新ID。这是JSFiddle。将原始类设置回阻止并删除时：

.removeClass('clonedInput').addClass('ShowClones');

克隆恢复正常并创建具有新ID的div？

Answer 1

重新排列您的元素，以便将克隆附加到一个容器，然后您的计数将准确反映您的克隆计数;

<div id="results"><!-- I am empty --></div>

var n = $("#results").children().length;  // 0
var id = "input" + n;
var clone = $("#clonedInput").clone().attr("id", id);
clone.appendTo("#results");

// $("#results").children().length // 1
<div id="results"><input id="input0" ... /></div>

Answer 2

这是一个有兴趣的人的实例

http://jsfiddle.net/adrienboufflet/7kkaLnh3/5/

$(document).ready(function () {

            $('#btnAdd').click(function () {

                var num = $('.datatable_class').length; 

                var newNum = num + 1; 


                var newElem = $('#input1').clone().attr('id', 'input' + newNum).removeClass('clonedInput').addClass('.ShowClones');


//row1
                newElem.find('#td02 input').attr('id', 'num02_' + newNum).attr('name', 'num02_' + newNum).val('');
                newElem.find('#td03 input').attr('id', 'idfixture03_' + newNum).attr('name', 'idfixture03_' + newNum).val('');

//row2      
                newElem.find('#td21 input').attr('id', 'num21_' + newNum).attr('name', 'num21_' + newNum).val('');
                newElem.find('#td22 input').attr('id', 'idfixture22_' + newNum).attr('name', 'idfixture22_' + newNum).val('');

//row3   
                newElem.find('#td31 input').attr('id', 'num31_' + newNum).attr('name', 'num31_' + newNum).val('');
                newElem.find('#td32 input').attr('id', 'idfixture32_' + newNum).attr('name', 'idfixture32_' + newNum).val('');

//row4                
                newElem.find('#td41 input').attr('id', 'num41_' + newNum).attr('name', 'num41_' + newNum).val('');
                newElem.find('#td42 input').attr('id', 'idfixture42_' + newNum).attr('name', 'idfixture42_' + newNum).val('');

                $('#input' + num).after(newElem);

                $('#btnDel').attr('disabled', false);

                if (newNum == 100)

                    $('#btnAdd').attr('disabled', 'disabled');

            });

            $('#btnDel').click(function () {
                var num = $('.clonedInput').length;
                $('#input' + num).remove();

                $('#btnAdd').attr('disabled', false);

                if (num - 1 == 1)

                    $('#btnDel').attr('disabled', 'disabled');
            });

        });

Jquery克隆一个div，从隐藏的div中提供新的id并显示新的div

2 个答案: