Question

我有这段代码

<div id="old">
   <input type="text" name="id"  id="id" size="2" value="1"/>
   <input type="text" name="UM"  id="UM" size="2"/>
   <input type="text" name="DS"  id="DS" size="2"/>
</div>

<input type="button" value="Add" id="clone" />
<input type="button" value="remove" id="remove" />

使用此Jquery

    $(document).ready(function(){
      $("input#clone").click(function(){
        $("div#old").clone().attr( 'id', 'new_div' ).appendTo("body")
        $("#id").val(parseInt($("#id").val()) + 1);

               $('#new_div input').each(function() {
               $(this).attr('name', $(this).attr('name') + 1);
               $(this).attr('id', $(this).attr('id') + 1);   
            });

              });
    });


    $(document).ready(function(){
    $("input#remove").click(function(e) {

        if ($('#id').val() == '1')
        {
            $('remove').prop('disabled', true);
        }
        else
        {
        $("#id").val(parseInt($("#id").val()) - 1);
        var $el = $('#new_div');
        $el.clone(true).appendTo('#new_div');
        $el.remove();
        }
    });
    });

但是当我删除克隆元素时，删除第一个没有最后一个。

除此之外，我想自动增加克隆元素中输入的名称和ID，如：

iD1，UM1，DS1
iD2，UM2，DS2

http://jsfiddle.net/MetCastle/aN37B/

感谢您的帮助！

Answer 1

您可以使用类名来避免在多个元素上使用ID，也可以在克隆元素ID中添加一些计数器。

试试这个：

$(document).ready(function () {
    $("input#clone").click(function () {
        $("div#old").clone().attr('id', 'new_div').appendTo("body");

        //split by underscore of any input field within div to get counter
        var count = $('#new_div input:first-child').attr('id').split("_");
        count = count.pop();
        // set counter to 1 if its not already set or set it to +1 if its set
        count = count > 0 ? count + 1 : 1;

        //loop through all input elements and add counter to their IDs
        $('#new_div input').each(function() {
           $(this).attr('id', $(this).attr('id') + '_' + count);
           $(this).val($(this).val() + 1);
        });
    });
});

Answer 2

我已经制作了一个没有字符串解析的解决方案......

JSFIDDLE

HTML：

<div id="old" class="old">
    <input type="text" name="id"  size="2" value="1"/>
    <input type="text" name="UM"  size="2"/>
    <input type="text" name="DS"   size="2"/>
</div>
<input type="button" value="Add" id="clone" />
<input type="button" value="remove" id="remove" />

的js

$(document).ready(function(){

var counter = 1;

$("input#clone").click(function(){
    //Let's make a copy to work with
    var originalDiv = $("div#old");
    var cloneDiv = originalDiv.clone(); 

    //Renaming cloneDiv
    cloneDiv.attr('id','newDiv'+counter);

    //Renaming inputs in  cloneDiv
    $("[name='id']",cloneDiv).attr('name','id'+counter);
    $("[name='UM']",cloneDiv).attr('name','UM'+counter);
    $("[name='DS']",cloneDiv).attr('name','DS'+counter); 

    //Value first textfield
    $("[name='id"+counter+"']",cloneDiv).val(1+counter); 

    //Append to originalDiv parent whatever it is...
    originalDiv.parent().append(cloneDiv);
    //OR Append it just after last created div
    //$('.old:last').after(cloneDiv);

    //Increment counter
    counter++;      
});

    $("input#remove").click(function(e) { 
        if(counter > 1){
            //Remove the last clone
            $('#newDiv'+(counter-1)).remove();
            //Decrease counter
            counter--;
        }         
    });  
});

克隆元素时自动增量inputname

2 个答案: