Question

我需要克隆div并增加ID，但也将克隆的次数限制为3。这是我的代码：

我有一个按钮，可以克隆div中的字段并增加ID。这工作正常。我想添加只允许用户克隆3次的功能;所以输出将是<div id="Outer_00">，<div id="Outer_01">和<div id="Outer_02">;然后在第4个按钮上单击它不会克隆。这是一个jsFiddle：http://jsfiddle.net/Ea5JE/如果jsFiddle不起作用，那么代码是：

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    $( document ).ready(function() {

        var current_id = 0;
     $('#btn').click(function(){
         nextElement($('#Outer_00'));
     })

     function nextElement(element){
         var newElement = element.clone();
         var id = current_id+1;
         current_id = id;
         if(id <10)id = "0"+id;
         newElement.attr("id",element.attr("id").split("_")[0]+"_"+id);
         var field = $('input', newElement).attr("id");
         $('input', newElement).attr("id", field.split("_")[0]+"_"+id );
         newElement.appendTo($("#elements"));
     }

    });

    </script>
</head>
<body>
    <div id="elements">
 <div id="Outer_00">
 <input type="text" id="Field1_00" value="">
 &nbsp;
 <input type="text" id="Field2_00" value="">
 </div>
 </div>

 <button id="btn">button</button>
</body>
</html>

感谢任何帮助，谢谢。

Answer 1

只需添加一项检查，看看您是否已经到达了id = 2

的第三个元素

$('#btn').click(function(){
    if(current_id < 2)
        nextElement($('#Outer_00'));
});

<强> Demo fiddle

Answer 2

DEMO HERE 我会这样做......

   $( document ).ready(function() {

    var current_id = 0;
    $('#btn').click(function(){
        nextElement($('#Outer_00'));
    })

    function nextElement(element){

        if(current_id!=2){
        var newElement = element.clone();
        var id = current_id+1;
        current_id = id;

        if(id <3) id = "0"+id;
        newElement.attr("id",element.attr("id").split("_")[0]+"_"+id);
        newElement.data('id',id);
        var field = $('input', newElement).attr("id");
        $('input', newElement).attr("id", field.split("_")[0]+"_"+id );
            newElement.appendTo($("#elements"));}
    }

});

Answer 3

我会这样做：

$(document).ready(function() {
    $('#btn').click(function(){
        var el = $('[id^="Outer_"]');
        if ( el.length < 3 ) {
            var clone = el.last().clone(true);
            clone.children().addBack().prop('id', function(_,ID) {
                return ID.slice(0,-1) + (parseInt(ID.slice(-1),10)+1);
            }).end().end().appendTo("#elements");
        }
    });
});

FIDDLE

Answer 4

如何重复使用，例如：

function limit(func, max) {
    return function() {
        if (max > 0) {
            max = max - 1;
            return func.apply(this, arguments);
        }
    };      
};

然后：

var nextElement = limit(function(element) {
    //function body here
}, 3);

$('#btn').click(function(){
    nextElement($('#Outer_00'));
});

这是你的小提琴的分叉版本：http://jsfiddle.net/2RHXx/14/

jQuery克隆一个div并增加ID，但将克隆限制为3次

4 个答案: