Visualizzazione dei risultati da 1 a 3 su 3
  1. #1
    Utente di HTML.it
    Registrato dal
    May 2012
    Messaggi
    619

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

    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:
    codice HTML:
    <div class="mia_classe">
    <input class='a' name='valore[]'>
    <input class='b' name='valore_b[]'>
    </div>
    Eseguo il codice una volta, precisamente questo:
    codice:
    $('.mia_classe').last().append($('.mia_classe').last().clone().html());
    E ottengo effettivamente quello che desideravo, ovvero:
    codice HTML:
    <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

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,526
    Ciao, sei sicuro che il risultato sia proprio quello?
    Da quello script, anche eseguendolo la prima volta, ottengo questo:

    codice:
    <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:
    codice:
    $('.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:
    codice:
    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.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  3. #3
    Utente di HTML.it
    Registrato dal
    May 2012
    Messaggi
    619
    Grazie 1000!
    Non mi ero accorto che il risultato non era quello aspettato dal momento che visivamente il risultato sembrava corretto!
    Sei stato chiarissimo!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.