jQuery的克隆一個div並增加了ID，但是限制克隆到3倍

我需要克隆div和遞增的ID，但也限制了克隆到3 這裏的次數是我的代碼：jQuery的克隆一個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>

任何幫助表示讚賞，感謝。

來源

2013-08-04 tjforce

只需添加一個檢查，看看是否已經達到了你的id爲第三個元素= 2

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

Demo fiddle

來源

2013-08-04 20:52:14

由於限制工作很好。我還有一個問題。克隆第二組和第三組時，元素爲：Field1_01，Field1_01，Field1_01 ...應該是Field1_01，Field2_01，Field3_01;它只是3次克隆第一個元素，而不是每個元素。有任何想法嗎？ – tjforce

@tjforce你真的需要爲你的輸入設置ID嗎？我只是將name屬性用作像'elements [0] []'（或'elements [0] [name]''這樣的數組來表示更多的數據描述），並且在克隆時增加索引，以便更容易循環數據服務器端 –

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"));} 
    } 

});

來源

2013-08-04 20:58:12 KyleK

我只想做：

$(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

來源

2013-08-04 21:06:26 adeneo

什麼東西可重複使用的，如：

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/

來源

2013-08-05 00:22:53 ach

jQuery的克隆一個div並增加了ID，但是限制克隆到3倍

回答

相關問題