CODEWITHSUNDEEP
javascriptjqueryhtml
Sheff
Sheff

Reputation: 3482

jQuery clone duplicate IDs

I have an HTML element with a large collection of unordered lists contained within it. I need to clone this element to place elsewhere on the page with different styles added (this is simple enough using jQuery). 

$("#MainConfig").clone(false).appendTo($("#smallConfig"));

The problem, however, is that all the lists and their associated list items have IDs and clone duplicates them. Is there an easy way to replace all these duplicate IDs using jQuery before appending?

Upvotes: 53

Views: 47567

Answers (9)

RAGINROSE
RAGINROSE

Reputation: 724

Here is a solution with id.

var clone = $("#MainConfig").clone();
clone.find('[id]').each(function () { this.id = 'new_'+this.id });
$('#smallConfig').append(clone);

if you want dynamically set id, you can use counter instead of 'new_'.

Upvotes: 0

TarranJones
TarranJones

Reputation: 4242

I believe this is the best way 

var $clone = $("#MainConfig").clone(false);
$clone.removeAttr('id'); // remove id="MainConfig"
$clone.find('[id]').removeAttr('id'); // remove all other id attributes
$clone.appendTo($("#smallConfig")); // add to DOM.

Upvotes: 0

Camwyn
Camwyn

Reputation: 456

FWIW, I used Dario's function, but needed to catch form labels as well.

Add another if statement like this to do so:

if(element.htmlFor){
var matches = element.htmlFor.match(/(.+)_\d+/);
if(matches && matches.length >= 2)            // Captures start at [1].
  element.htmlFor = matches[1] + "_" + cur_num;
}

Upvotes: 3

Dario Novoa
Dario Novoa

Reputation: 115

This is based on Russell's answer but a bit more aesthetic and functional for forms. jQuery:

$(document).ready(function(){
   var cur_num = 1;    // Counter

    $('#btnClone').click(function(){

          var whatToClone = $("#MainConfig"); 
          var whereToPutIt = $("#smallConfig");

          var cloned = whatToClone.clone(true, true).get(0);
          ++cur_num;
          cloned.id = whatToClone.attr('id') + "_" + cur_num;                  // Change the div itself.

        $(cloned).find("*").each(function(index, element) {   // And all inner elements.
          if(element.id)
          {
              var matches = element.id.match(/(.+)_\d+/);
              if(matches && matches.length >= 2)            // Captures start at [1].
                  element.id = matches[1] + "_" + cur_num;
          }
          if(element.name)
          {
              var matches = element.name.match(/(.+)_\d+/);
              if(matches && matches.length >= 2)            // Captures start at [1].
                  element.name = matches[1] + "_" + cur_num;
          }

         });

       $(cloned).appendTo( whereToPutIt );

    });
});

The Markup:

<div id="smallConfig">
    <div id="MainConfig">
        <ul>
            <li id="red_1">red</li>
            <li id="blue_1">blue</li>
        </ul>
      <input id="purple" type="text" value="I'm a text box" name="textboxIsaid_1" />
    </div>
</div>

Upvotes: 4

Salty
Salty

Reputation: 6688

$("#MainConfig")
    .clone(false)
    .find("ul,li")
    .removeAttr("id")
    .appendTo($("#smallConfig"));

Try that on for size. :)

[Edit] Fixed for redsquare's comment.

Upvotes: 16

Russell G
Russell G

Reputation: 478

Since the OP asked for a way to replace all the duplicate id's before appending them, maybe something like this would work. Assuming you wanted to clone MainConfig_1 in an HTML block such as this:

<div id="smallConfig">
    <div id="MainConfig_1">
        <ul>
            <li id="red_1">red</li>
            <li id="blue_1">blue</li>
        </ul>
    </div>
</div>

The code could be something like the following, to find all child elements (and descendants) of the cloned block, and modify their id's using a counter:

var cur_num = 1;    // Counter used previously.
//...
var cloned = $("#MainConfig_" + cur_num).clone(true, true).get(0);
++cur_num;
cloned.id = "MainConfig_" + cur_num;                  // Change the div itself.
$(cloned).find("*").each(function(index, element) {   // And all inner elements.
    if(element.id)
    {
        var matches = element.id.match(/(.+)_\d+/);
        if(matches && matches.length >= 2)            // Captures start at [1].
            element.id = matches[1] + "_" + cur_num;
    }
});
$(cloned).appendTo($("#smallConfig"));

To create new HTML like this:

<div id="smallConfig">
    <div id="MainConfig_1">
        <ul>
            <li id="red_1">red</li>
            <li id="blue_1">blue</li>
        </ul>
    </div>
    <div id="MainConfig_2">
        <ul>
            <li id="red_2">red</li>
            <li id="blue_2">blue</li>
        </ul>
    </div>
</div>

Upvotes: 19

yvess
yvess

Reputation:

I use something like this: $("#details").clone().attr('id','details_clone').after("h1").show();

Upvotes: 6

Crescent Fresh
Crescent Fresh

Reputation: 116980

If you need a way to reference the list items after you've cloned them, you must use classes, not IDs. Change all id="..." to class="..."

If you are dealing with legacy code or something and can't change the IDs to classes, you must remove the id attributes before appending.

$("#MainConfig").clone(false).find("*").removeAttr("id").appendTo($("#smallConfig"));

Just be aware that you don't have a way to reference individual items anymore.

Upvotes: 44

Danita
Danita

Reputation: 2514

If you will have several similar items on a page, it is best to use classes, not ids. That way you can apply styles to uls inside different container ids.

Upvotes: 0

Related Questions