CODEWITHSUNDEEP
javascriptjquery
Franz Justin Buenaventura
Franz Justin Buenaventura

Reputation: 366

Cloning a Div and changing the names and id of children to become unique

Hey guys just a quick question, I tried to replicate this: Clone a div and change the ID's of it and all it's children to be unique

Its exactly what I want and need but I can't seem to make it work.

This is what I got: 

<div id="current_users">
    <table id="user_list">
        <tr id="user-0">
            <td id="first_name-0">Jane</td>
            <td id="last_name-0">Doe</td>
        </tr>
        <tr id="user-1">
            <td id="first_name-1">John</td>
            <td id="last_name-1">Doe</td>
        </tr>
    </table>
</div>
<button id="button" onclick="duplicate()">Click me</button>

<script>
    function duplicate() {
        $("#current_users").clone(false).find("*[id]").andSelf().each(function () { $(this).attr("id", $(this).attr("id") + "_cloned"); });
    }
  </script>

There are no errors showing up in my console, I tried looking for other solutions but this is the best I found. Thanks for those who can help

Upvotes: 0

Views: 1738

Answers (3)

user1978450
user1978450

Reputation:

There's likely a more elegant jQuery way of doing this (my jQuery's fairly poor), but here's a step-by-step way. Appending to body in this example, but can easily be changed to appended to another element. Also assuming you want the entire div cloned.

function duplicate(){

  // Clone
  $cloned_users = $('#current_users').clone();
  $cloned_users.attr('id', $cloned_users.attr('id') + '_cloned');

  // Change all internal ids
  $cloned_users.find('*[id]').each(function(){
    $elm = $(this);
    $elm.attr('id', $elm.attr('id') + '_cloned');
  });

  // Append to body
  $('body').append($cloned_users);

  // Or, after original div
  // $cloned_users.insertAfter($('#current_users'));

}

Upvotes: 1

guest271314
guest271314

Reputation: 1

Try substituting .addBack() for .andSelf() using $.now() * (index + 1) within .each() to prevent duplicate ids in DOM , .appendTo() 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="current_users">
  <table id="user_list">
    <tr id="user-0">
      <td id="first_name-0">Jane</td>
      <td id="last_name-0">Doe</td>
    </tr>
    <tr id="user-1">
      <td id="first_name-1">John</td>
      <td id="last_name-1">Doe</td>
    </tr>
  </table>
</div>
<button id="button" onclick="duplicate()">Click me</button>

<script>
  function duplicate() {
    var clone = $("#current_users").clone(false);
    clone.find("*[id]").map(function(index, el) {
      el.id = el.id + "_cloned_" 
              + $.now() 
              * ( index + 1 );
      return el
    });
    clone.attr("id", function(index,id) {
      return id +"_cloned_"+ $("[id^=current_users]").length
    }).appendTo("body");
  }
</script>

Upvotes: 1

Vishal Anand
Vishal Anand

Reputation: 1471

you are showing your clone on body. Create a div like 

<div id='cloned_output'></div>



function duplicate() {
    $("#current_users").clone(false).find("*[id]").andSelf().each(function () {

       $("#cloned_output").append( $(this).attr("id", $(this).attr("id") + "_cloned"));

    });

Upvotes: 1

Related Questions