jquery - 如何在jquery中克隆

Question

我正在使用此代码进行克隆。

1. 当我单击克隆按钮时，我想修改此代码，它会一次又一次地克隆每个新生成的动态 div 的克隆和删除按钮。

2. 当我第一次单击克隆按钮时，它使用相同的 id id =clonedInput1克隆相同的 div ，然后开始递增。

你可以在这里找到一个工作版本http://jsfiddle.net/shalucosmic/FEpMk/7/

  <script type="text/javascript">
  $(document).ready(function(){
        //jQuery(this).parent(".clonedInput")
           var regex = /^(.*)(\d)+$/i;
           var cloneIndex = $(".clonedInput").length;

           $("button.clone").live("click", function(){

           $(this).parents(".clonedInput").clone().appendTo("body").attr("id",  "clonedInput" +  cloneIndex)
           .find("*").each(function() {
            var id = this.id || "";
            var name = this.name || "";

            var match = id.match(regex) || [];

           var matchname = name.match(regex) || [];
           if (match.length == 3) {
            this.id = match[1] + (cloneIndex);
           }
          if (matchname.length == 3) {
            this.name = match[1] + (cloneIndex);
          }
 });
cloneIndex++;

});
$("button.remove").live("click", function(){
   $(this).parents(".clonedInput").remove();
});

});

  <div id="clonedInput1" class="clonedInput">
   <input type="text" name="contributer1" value="" id="contributer1"/>

   <div class="actions">
    <button class="clone">Clone</button> 
    <button class="remove">Remove</button>
   </div>
 </div>

Answer 1

您可以将其简化为

$(document).ready(function() {
    // jQuery(this).parent(".clonedInput")
    var regex = /^(.*)(\d)+$/i;
    var cloneIndex = $(".clonedInput").length + 1;

    $(document).on("click", 'button.clone', function() {
        $(this).closest(".clonedInput").clone().appendTo("body").attr("id",
                "clonedInput" + cloneIndex).find("[id], [name]").each(
                function() {
                    this.id = this.id.replace(/\d+$/, cloneIndex);
                    this.name = this.name.replace(/\d+$/, cloneIndex);
                });
        cloneIndex++;
    });

    $("button.remove").live("click", function() {
                $(this).parents(".clonedInput").remove();
            });

});

演示：小提琴

Answer 2

在声明cloneIndex时，您需要将其声明如下。

var cloneIndex = $(".clonedInput").length+1;

演示

Answer 3

you need to add 1 in cloned input length

var cloneIndex = $(".clonedInput").length + 1;
                                    // -----^^^^ here

fiddle here