javascript true jQuery duplicati ID duplicati




table html no wrap (7)

Se nella pagina ci sono molti elementi simili, è meglio usare le classi, non gli ID. In questo modo puoi applicare gli stili a uls all'interno di diversi id contenitore.

Ho un elemento HTML con una grande collezione di liste non ordinate contenute al suo interno. Ho bisogno di clonare questo elemento per posizionarlo altrove sulla pagina con diversi stili aggiunti (questo è abbastanza semplice usando jQuery).

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

Il problema, tuttavia, è che tutti gli elenchi e i relativi elementi di elenco associati hanno ID e il clone li duplica. C'è un modo semplice per sostituire tutti questi ID duplicati usando jQuery prima di aggiungerli?


Credo che questo sia il modo migliore

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.

Questo si basa sulla risposta di Russell, ma un po 'più estetico e funzionale per le forme. 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 );

    });
});

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

Uso qualcosa del genere: $ ("# dettagli"). Clone (). Attr ('id', 'details_clone'). After ("h1"). Show ();


Se hai bisogno di un modo per fare riferimento agli elementi dell'elenco dopo averli clonati, devi utilizzare le classi, non gli ID. Cambia tutto id = "..." in class = "..."

Se si ha a che fare con codice legacy o qualcosa del genere e non è possibile modificare gli ID in classi, è necessario rimuovere gli attributi id prima di accodare.

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

Tieni presente che non hai più modo di fare riferimento a singoli elementi.


FWIW, ho usato la funzione di Dario, ma avevo bisogno di prendere anche le etichette dei moduli.

Aggiungi un'altra istruzione if in questo modo:

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

Dal momento che l'OP chiedeva un modo per sostituire tutti gli id ​​duplicati prima di aggiungerli, forse qualcosa del genere avrebbe funzionato. Supponendo di voler clonare MainConfig_1 in un blocco HTML come questo:

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

Il codice potrebbe essere simile al seguente, per trovare tutti gli elementi figlio (e discendenti) del blocco clonato e modificare i loro id utilizzando un contatore:

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

Per creare un nuovo codice HTML come questo:

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






html