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

click here

在不使用新div的情况下克隆jquery中的2个相似元素

3 个答案: