在jquery中克隆2個相似元素而不使用新的div

Question

我有一個包含2個下拉列表和一個文本框的表單，我需要一次克隆所有它們，將它們限制為5個div，並同時增加id或名稱，我可以在一個div中使用兩個不同的元素來實現，但是面臨一個問題一次使用兩個相同的元素，因為兩者的ID相似。 我用了Fiddle_Demo

我的html代碼是：

<div id="elements">

<div id="Outer_00">
   <select name="Type" id="Type_00" disabled="disabled" class="edit">
 <option value="ArtistType"  selected="selected">Artist Type </option>
<option value="Singer">Singer</option>
<option value="Actor">Actor</option>
<option value="Fighter">Fighter</option>
<option value="Editor">Editor</option>
<option value="Writer">Writer</option>
</select>
&nbsp; &nbsp;   
<select name="ASubType" id="ASubType_00" disabled="disabled" class="edit">
<option value="Artist Sub-Type"  selected="selected">Artist Sub-Type</option>
 <option value="Actor" >-----Actor-----</option>
 <option value="Comedian" >Comedian</option>
 <option value="Hero" >Hero</option>
 <option value="Villain" >Villain</option>
  <option value="Supporting Cast" >Supporting Cast</option>
 <option value="Singer" >-----Singer-----</option>
<option value="Folk" >Folk</option>
 <option value="Pop" >Pop</option>
 <option value="Movie" >Movie</option>

 </select>
 &nbsp; &nbsp;
 <input type="text" placeholder="Quantity" name="Quantity" id="Quantity_00" disabled="disabled" class="edit" onkeypress="return numberOnly(this, event)" title="You can only enter numbers upto 3 " maxlength="3" />


</div >

</div>

Answer 1

這是你的答案：

var counter = 1;

$("#btnAdd").click(function () {
    if (counter <= 4) {
        counter++
        var innerCounter = 0;
        $('#elements').find(".innerDiv:last").clone().appendTo("#elements").find('select').each(function () {
            innerCounter++;
            $(this).attr({
                'name': 'ddl_' + counter + innerCounter,
                    'id': 'ddl_' + counter + innerCounter
            })
        }).next('input')
            .attr({
            'name': 'inText_' + counter,
                'id': 'inText_' + counter
        })
    }
});

http://jsfiddle.net/realdeepak/hGG3V/3/

Answer 2

您可以使用like;

var counter = 1;

$("#btnAdd").click(function() {
    if(counter <= 5)  {
     counter++
         var innerCounter = 0;
         $('table').find("tr:eq(1)").clone().appendTo("table").find('select').each(function() {
             innerCounter++;
             $(this).attr({
                   'name': 'ddl_' + counter + innerCounter,
                   'id'   : 'ddl_' + counter +innerCounter
               })
         }).closest('td').next('td').find('input')
               .attr({
                   'name': 'ddl_' + counter,
                   'id'   : 'ddl_' + counter
               })
    }
});

這是一個有效的演示： http : //jsfiddle.net/UkzU3/3/

Answer 3

如果您的ID代碼有效，而不是解決問題，

//嘗試這個

var counter = 1;

$("#btnAdd").click(function() {
 counter+=1;
 if(counter <= 5)  {
$('table').find("tr:eq(1)").clone().appendTo("table").find('select')
        .attr({
               'name': 'ddl_' + counter,
               'id'   : 'ddl_' + counter
           })
           .closest('td').next('td').find('input')
           .attr({
               'name': 'ddl_' + counter,
               'id'   : 'ddl_' + counter
           })
}
});

點擊這里