Clonare e replicare il contenuto di una elemento con una classe specifica, raddoppiano gli elementi

[robynosse]

Ciao a tutti,

non riesco ad effettuare un operazione:
dato un div, con una specifica classe, ho bisogno di clonarla N volte (nella mia pagina c'è un bottone che permette di farlo);

Lo stato iniziale è questo:

<div class="mia_classe">
<input class='a' name='valore[]'>
<input class='b' name='valore_b[]'>
</div>

Eseguo il codice una volta, precisamente questo:

$('.mia_classe').last().append($('.mia_classe').last().clone().html());

E ottengo effettivamente quello che desideravo, ovvero:

<div class="mia_classe">
<input class='a' name='valore[]'>
<input class='b' name='valore_b[]'>
</div>
<div class="mia_classe">
<input class='a' name='valore[]'>
<input class='b' name='valore_b[]'>
</div>

Il problema è che se rieseguo il codice jquery gli elementi diventano 4, poi 8, po 16 e così via, mentre io vorrei incrementare di 1.
In che cosa sbaglio?

Grazie,
Roberto

[KillerWorm]

Ciao, sei sicuro che il risultato sia proprio quello?
Da quello script, anche eseguendolo la prima volta, ottengo questo:

<div class="mia_classe">
<input class="a" name="valore[]">
<input class="b" name="valore_b[]">

<input class="a" name="valore[]">
<input class="b" name="valore_b[]">
</div>

Cioè viene clonato il contenuto di quell'elemento e quindi appeso dentro lo stesso elemento.

Non coincide con ciò che tu hai indicato di ottenere però è esattamente ciò che fa quello script:

$('.mia_classe').last().append($('.mia_classe').last().clone().html());

che tradotto in umanese significa: prendi l'ultimo elemento .mia_classe e appendici dentro il contenuto del clone di quello stesso elemento.

Chiaramente non può funzionare come hai supposto.

Il metodo append() infatti inserisce, ciò che gli passi, in fondo al contenuto dell'elemento a cui lo applichi, non di seguito. Potresti invece usare il metodo after() che inserisce, ciò che gli passi, subito dopo l'elemento a cui lo applichi.

Inoltre, il metodo html() non ti serve in questo caso, perché altrimenti viene considerato solo il contenuto dell'elemento e non l'intero elemento.

Una soluzione potrebbe essere questa:

let $ultimoElemento = $('.mia_classe').last();
$ultimoElemento.after($ultimoElemento.clone());

che tradotto significa: prendi l'ultimo elemento .mia_classe e inserisci, dopo di questo, il suo stesso clone.

[robynosse]

Grazie 1000!
Non mi ero accorto che il risultato non era quello aspettato dal momento che visivamente il risultato sembrava corretto!
Sei stato chiarissimo!