Question

我正在尝试创建HTML div的克隆。 div里面有一个标签和两个文本框。我需要更改新创建的div的标签值。这是我的代码。

<body>
        <div id="PayDiv2">
            <label id="PayLbl2">Payment No 2: </label>
            <input type="text" />
            <input type="text" /> 
        </div>

        <div id ="totPayForm" >
            <label id="totPayLbl">Total Payment: </label>
            <input type="text" />
            <input type="text" /> 
            <input type="submit" value="Add new one"  onclick="addNewField();
                    return false;">
        </div>
        <input type="button" value="Clone box" id="btn" />

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

        <script>
            var i=3;
                //When DOM loaded we attach click event to button
                $(document).ready(function() {

                    $('#btn').click(function() {
                        var cloned = $('#PayDiv2').clone();
                        cloned.insertBefore("#totPayForm");
                        $('#PayLbl2').html("Payment No "+ i++ + ':');
                    });
                });

        </script>
    </body>

问题是新创建的克隆放置的位置。第一个克隆放在所有东西之前（即使我需要将它放在我用来创建div的原始div之后。）之后生成的div也会被放置，而早期的div会下降。这里很难描述。如果你能够亲切地运行我的代码，你会看到问题所在。

我还有另一个要求为克隆的div生成唯一ID。由于我是JQuery的新用户，因此我发现很难生成id。

如果你能在这种情况下帮助我，我很高兴。谢谢大家。

Answer 1

问题是$('#PayLbl2').html("Payment No "+ i++ + ':');它总是更改第一个元素的标签而不是克隆（因为重复的ID）......

所以使用class而不是id

<div class="PayDiv2">
    <label class="PayLbl2">Payment No 2:</label>
    <input type="text" />
    <input type="text" />
</div>

然后

var i = 3;
//When DOM loaded we attach click event to button
$(document).ready(function () {

    $('#btn').click(function () {
        var cloned = $('.PayDiv2').first().clone();
        cloned.insertBefore("#totPayForm");
        cloned.find('.PayLbl2').html("Payment No " + i+++':');
    });
});

演示：Fiddle

Answer 2

如@Arun P Johny的回答所述，设置div PayDiv0

$('#btn').click(function () {
    var cloned = $('.PayDiv2').first().clone();
    // find total divs with class PayDiv2
    var noOfDivs = $('.PayDiv2').length;

    cloned.insertBefore("#totPayForm");

    // add new id to the cloned div
    cloned.attr('id', 'PayDiv' + noOfDivs);
    // find the label element inside new div and add the new id to it
    cloned.find('label').attr('id', 'PayLbl' + noOfDivs);

    cloned.find('.PayLbl2').html("Payment No " + i+++':');
});

这样您可以将动态ID添加到元素中。

Answer 3

在这里。

Demo

将您的HTML设为如下

<div id="PayDiv0" class="PayDiv0">
    <label id="PayLbl0" class="PayLbl2">Payment No 2:</label>
    <input type="text" />
    <input type="text" />
</div>
<div id="totPayForm">
    <label id="totPayLbl">Total Payment:</label>
    <input type="text" />
    <input type="text" />
    <input type="submit" value="Add new one" onclick="addNewField();
                    return false;">
</div>
<input type="button" value="Clone box" id="btn" />

JS应该是这样的

var i = 3;

$(document).ready(function () {

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

        var cloned = $('.PayDiv0').first().clone();
        var noOfDivs = $('.PayDiv0').length;
        cloned.insertBefore("#totPayForm");

        cloned.attr('id', 'PayDiv' + noOfDivs);
        cloned.find('label').attr('id', 'PayLbl' + noOfDivs);

        cloned.find('.PayLbl2').html("Payment No " + i+++':');
    });

});

使用JQuery创建HTML div克隆的问题

3 个答案:

Demo