jQuery: la funzione clone()

Una delle funzioni più potenti di jQuery è sicuramente la funzione clone(), per mette di clonare porzioni di codice, magari a partire da un template opportunamente costruito e stando attenti alla duplicazione di id o name nel caso dei form.

Sarà proprio un form il caso in cui andremo a testare l’utilizzo della nostra funzione. Partiamo dall’html:

<form action="" method="post">
<h2>Campi singoli</h2>
<label for="primo">Primo</label><br>
<input type="text" name="primo"><br><br>
<label for="secondo">Secondo</label><br>
<input type="text" name="secondo"><br><br>
<h2>Campi ripetuti</h2>
<button id="add">Add</button><br>
<div id="target"></div>
</form>
<div id="template">
<label for="terzo">Terzo</label><br>
<input type="text" name="terzo" ></br><br>
</div>

Il form è piuttosto normale, sono de le cose importanti da notare: il div con id target e il div con id template, questo sarà nascosto tramite css, ma sarà proprio questo l’elemento che andremo a clonare.

Si tratterò quindi di prendere tutto il conteuto del tag dic con id template, clonarlo e poi personalizzare il testo della label e il name del campo di input

$(document).ready(function() {
var rowCount = 0;
$('#add').click(function() {
$('#template *')
.clone()
.filter('input')
.attr('name', function(index, name) {
return name +'[' + rowCount + ']';
})
.end()
.filter('label').text( function(index, name) {
return name +'[' + rowCount + ']';
})
.end()
.appendTo('#target');
rowCount++;
return false;
});
});

Vediamo un attimo il codice con più calma: impostiamo un contatore a zero, poi al click sul bottone prendiamo tutto il contenuto di template(‘#template *’), lo cloniamo cerchiamo il tag input con la funzione filter e assegniamo all’attributo name il valore restituito dalla funzione che prende l’attributo name e gli aggiunge il valore del contatore. Ripetiamo la stessa operazione perla label, appendiamo tutto al target e incrementiamo il contatore per la prossima aggiunta.

L’esempio