javascript - true - table html no wrap




jQuery duplicati ID duplicati (6)

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?


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.


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>

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

Prova questo per dimensioni. :)

[Modifica] Risolto per il commento di redsquare.


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

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.






html