Elementen klonen

Stel dat we vanuit AJAX een aantal tweets inlezen en deze op onze pagina integreren. Elke tweet krijgt een gelijkaardige lay-out. Dit kunnen we perfect met de methodes die we in dit hoofdstuk hebben besproken. Echter de code die we moeten toevoegen is nogal uitgebreid. Waarschijnlijk gebruiken we een section-tag met daarin een hx-tag, een p-tag en nog een link. Stel dat we dit voor x tweets moeten herhalen. U merkt het al. Dit is een zeer omslachtige en tijdrovende bezigheid.

Voor dit soort toepassingen gebruiken we dus beter een sjabloon dat reeds de volledige structuur en lay-out bevat. Dit sjabloon gaan we dan met de methode clone() x maal kopiëren en plakken (klonen). Daarna hoeven we enkel nog de inhoud aan te passen en de toepassing is klaar.

★ Open dom/clone.html. ★ Bekijk de broncode en test de pagina in een browser.

Zodra u de pagina in een browser opent, verschijnt de tijd in de span-tag binnen de lijst. Klik op het listitem en de tijd verschijnt in een alertbox.

<ul>
    <li class="temp">Het is nu: <span class="tijd"></span></li>
</ul>
...
<script>
var uur = tijd();
$('.tijd').text(uur);
...
$('main li').click(function() {
    alert($(this).text());
});
...
function tijd(){ 
    d = new Date();
    uur = d.getHours()+'h '+d.getMinutes()+'min '+d.getSeconds()+'sec'; 
    return uur;
}
</script>

★ Klik enkele keren op de knop nieuwe tijd.

$('#clone').click(function() { 
    uur = tijd();
    $('main li.temp').clone().removeClass('temp').insertBefore('main li:first');
});

Het listitem met class .temp wordt gekloond. Vervolgens wordt in het gekloonde item de class .temp verwijderd. De nieuwe code wordt vooraan de lijst toegevoegd.

Telkens u op de knop klikt, verschijnt er een perfecte kopie van het laatste item uit de lijst. We klonen voorlopig enkel de li-tag. Klik maar eens op een gegenereerd item. De alertbox verschijnt enkel bij het laatste item, niet op de gekloonde items.

★ Pas de code als volgt aan en test het resultaat in een browser:

$('#clone').click(function() { 
    uur = tijd();
    $('main li.temp').clone(true).removeClass('temp').insertBefore('main li:first');
});

Met de parameter true gaat u zowel de li-tag als het gekoppelde event dupliceren. Vanaf nu verschijnt bij elk item een alertbox.

Als laatste gaan we niet enkel het item met zijn event handlers klonen, maar we gaan eveneens de datum opnieuw berekenen.

★ Pas de code als volgt aan en test het resultaat in een browser:

$('#clone').click(function() { 
    uur = tijd();
    $('main li.temp').clone(true).removeClass('temp').find('.tijd').text(uur).end().insertBefore('main li:first');
});

Voor we de gekloonde gegevens toevoegen, gaan we binnen de selectie op zoek naar span.tijd en passen de inhoud aan. De variabele uur verwijst naar de functie tijd(). Daarna keren we via end() terug naar de eerste selectie (li.temp) en voegen nu pas de nieuwe code vooraan de lijst toe. Ziehier het resultaat: