CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapclone
Jeeppp
Jeeppp

Reputation: 1573

Change inner elements id during clone

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 element.

In the below code I'm changing the Id of #selection while cloning, I need to dynamically change the id #select.

<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>

The JS below

$(function() {
  //on click
  $("body").on("click", ".btn-primary", 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);
    //append clone on the end
    $("#selections").append(clone);
  });
});

Upvotes: 12

Views: 17257

Answers (4)

Mike Volmar
Mike Volmar

Reputation: 2093

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

    });

Upvotes: 1

PeterKA
PeterKA

Reputation: 24638

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>

Upvotes: 1

Florian
Florian

Reputation: 727

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

Upvotes: 0

vijayP
vijayP

Reputation: 11512

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

Upvotes: 17

Related Questions