Change inner elements id during clone

后端 未结 4 1279
天命终不由人
天命终不由人 2021-02-13 18:17

I\'m doing a clone of a DIV element on button click, I\'m able to change the value of ID of the DIV element I\'m cloning. But is it possible to change the id of the inner elemen

相关标签:
4条回答
  • 2021-02-13 18:43

    You need to change all children's ID manually.

    Either change it for only one like that:

    //clone first element with new id
    clone = $("#selection").clone();
    clone.attr("id", newId);
    clone.find("#select").attr("id","whateverID");
    

    Or change all children using something like that: jQuery changing the id attribute of all the children

    0 讨论(0)
  • 2021-02-13 18:49

    Yes.. its totally possible as follows:

    var clone = $("#selection").clone();
    clone.attr("id", newId);
    
    clone.find("#select").attr("id","select-"+length);
    
    //append clone on the end
    $("#selections").append(clone); 
    
    0 讨论(0)
  • 2021-02-13 18:52

    I had a similar need to change the id of the clone and all its children. Posting my solution to help someone in the future. I wanted to change the ids and the names of all the children of the clone.

        $("#form").on('click', '.clone', function (e) {           
            e.preventDefault();
    
            var myid = this.id;  // id of section we are cloning i.e. section_1
            myid = myid.split('_');
    
            var num = 0;   
            // count existing sections
            $('.form_section').each(function(){
                num++;
            }); 
            num++; // new number for clone
            var newid = 'section_'+num;
            // make and change id of the clone
            var clone = $( "#section_"+myid[1] ).clone().attr("id", newid);
            // get clone children
            clone.children().find('input,textarea,button,a,select').attr('id', function( i, val ){ 
                 var oldid = val;
                 var newid = val + num;
                 clone.find("#"+val).attr("id", newid);
                 clone.find("#"+newid).attr("name", newid);
            });
    
            clone.appendTo( ".sections" );
    
        });
    
    0 讨论(0)
  • 2021-02-13 19:05

    Use the class .show-tick and the .children() method to locate the element:

    clone.children('.show-tick').attr('id', 'select-' + length);
    

    $(function() {
      //on click
      $(".btn-primary").on("click", function() {
        alert($(".input-group").length)
        var
        //get length of selections
          length = $(".input-group").length,
          //create new id
          newId = "selection-" + length,
          //clone first element with new id
          clone = $("#selection").clone().attr("id", newId);
          clone.children('.show-tick').attr('id', 'select-' + length++);
        //append clone on the end
        $("#selections").append(clone);
      });
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="selections">
      <div class="input-group" id="selection">
        <span class="input-group-addon">
        <i class="icon wb-menu" aria-hidden="true"></i>
         </span>
        <select class="show-tick" data-plugin="select2" id="select">
          <option>True</option>
          <option>False</option>
        </select>
      </div>
    </div>
    <button class="btn btn-primary" type="button" style="margin-left: 30px;">
      Add new selection
    </button>

    0 讨论(0)
提交回复
热议问题