3. diel - Nahradzovanie obsahu & klonovania v jQuery (DOM)

V minulej lekcii, Vkladanie obsahu v jQuery (DOM) , sme sa naučili rôzne spôsoby vkladanie obsahu pomocou javascriptové knižnice jQuery. V dnešnom tutoriále si ukážeme nahradzovanie obsahu, vyskúšame si opäť rôzne spôsoby na príkladoch. Tiež si ukážeme klonovanie.

Začneme zas tým, že si vytvoríme HTML súbor a JS súbor. Do JS súboru si vložíme základnú kostru s Document Ready udalostí:

$(function() {
    // Kód, který se spustí až po načtení stránky
});

Nahradzovanie obsahu

Nasledujúce metódy nám nahradí existujúcu elementy inými. To môžeme, hoci sa to možno aj nezdá, dobre využiť ku skráteniu nášho kódu.

Metódy sa nazývajú replaceAll() a `replaceWith (), je medzi nimi nasledujúce rozdiel:

• a.replaceAll(b) - nahradí b elementom a
• a.replaceWith(b) - nahradí a elementom b

Dôležité je uvedomiť si rozdiel medzi metódami z minulej lekcie, ako boli html() či text() a medzi metódami replaceAll() / replaceWith(). Tieto už nenahrádzajú len obsah elementu, ale kompletne celý element. Toto už je o veľa zábavnejšie, že?

Urobme si nejakú ukážku a predstavme si rôzne spôsoby použitia. Vytvoríme si teda takýto HTML súbor:

<p>Chci</p>
<p>Pozdravit</p>
<p>Penny</p>
<p>!</p>

Tiež si rovno upravíme CSS, kam pridáme štýly pre odseky <p> a elementy <div>.

p {
    background: #ed1c24;
    border: 2px solid #7f0011;
    padding: 5px 10px;
    margin: 10px;
    display: table;
    color: #ededed;
}

div {
    background: #0080C0;
    border: 2px solid #004080;
    padding: 5px 10px;
    margin: 10px;
    display: table;
    color: #ededed;
}

Náš dokument zatiaľ vyzerá takto:

Ukážok na nahradenie obsahu si urobíme niekoľko.

Ukážka # 1

Ako prvý si ukážeme jednoduché nahradenie našich odsekov za elementy <div>, ktoré budú obsahovať text "Nahradil".

Je to úplne jednoduché, ukážme si rovno kód v JavaScripte:

$('p').replaceWith('<div> Nahrazeno </div>');

výsledok:

Skvelé, všetko nám pekne funguje. Ukážeme si rovno aj použitie druhého spôsobu, teda replaceAll().

$('<div> Nahrazeno </div>').replaceAll('p');

Samozrejme získame úplne rovnaký výsledok ako v minulom príklade:

Poďme teda na niečo zaujímavejšie.

Ukážka # 2

Nahraďme naše odseku na divy s obsahom "Knock", pričom ten posledný bude mať obsah "Penny!". Hláška pochádza zo seriálu The Big Bang Theory, keď jeden z hlavných protagonistov takto klope na dvere svojej susedky. Asi tušíte ako to urobiť.

$('p').replaceWith('<div> Knock </div>');
$('div:last').replaceWith('<div> Penny! </div> ');

Kód funguje ako potrebujeme, ale nie je moc dobrý. Teraz samozrejme nevadí, že prepisujeme jeden element 2x, ale skúste si to napríklad na pár stovkách elementov, napríklad pri nejakej hry či aplikácie, tam by sme už zbytočne plytvali výkonom.

Ukážme si teda ako úloha vyriešiť lepšie. Využijeme metódy not(), ktorá vyberie elementy, ktoré nezodpovedajú danému selektoru.

Ako prvý si vyberieme odseky, ktoré nie sú posledné. Tu použijeme not('p:last'):

$('p').not('p:last').replaceWith('<div> Knock </div>');

A hneď za to doplníme nahradenie posledného odseku za <div> s obsahom "Penny!".

$('p:last').replaceWith('<div> Penny! </div>');

výsledok:

Jednoduché a určite lepší

Ukážka # 3

Ukážeme si ako môžeme zmeniť len značku elementu a zachovať pri tom jeho obsah. Na to nám poslúži napríklad metóda each(), ktorú použijeme na všetkých odsekoch.

Na vybraných odsekoch teda zavoláme metódu each(), ktorá spustí pre každý odsek odovzdanú funkciu. V nej definujeme premennú obsah, kam si uložíme súčasný obsah elementu a následne element prepíšeme.

$('p').each(function() {
    let obsah = $(this).html();
    $(this).replaceWith('<div>' + obsah + '</div>');
});

výsledok:

Celé je to pomerne jednoduché. Urobme si ten istý príklad, kedy k prepísaniu dôjde až po kliknutí. Tu prepíšeme v podstate len each() na on('click') a inak bude všetko fungovať rovnako. Ponechajme si predošlý kód a poďme zmeniť po kliknutí späť <div> opäť na odstavec <p>.

$('div').on('click', function() {
    let obsah = $(this).html();
    $(this).replaceWith('<p>' + obsah + '</p>');
});

Živé demo v prehliadači:

Klonovanie

V jQuery máme k dispozícii aj metódu pre klonovanie, teda kopírovanie - clone(). Poďme si ukázať ako funguje. Jednoducho vždy pridáme za náš selektor .clone() a daný element sa nám skopíruje, avšak do stránky sa zatiaľ nevložia!

Vytvoríme si v HTML nový obsah, tie predošlé napr. Zakomentujeme. Urobme si nasledujúci príklad:

<b>Ahoj</b>

V prehliadači zatiaľ vyzerá takto:

Ukážka # 4

Teraz si skúsme tento text naklonovať a následne ho vložiť za ten predchádzajúci.

$('b').clone().insertAfter('b');

výsledok:

Podarilo sa. Metóda clone() nám teda iba skopíruje element (niečo ako keď stlačíme Ctrl + C), ale zatiaľ nám nič nevloží. Na vkladanie máme metódy, ktoré ich odvolaní si zmieňovali v minulej lekcii - Vkladanie obsahu v jQuery (DOM) .

Ukážka # 5

Pridajme si do HTML tiež odsek:

<b>Ahoj</b>
<p>, jak se máš?</p>

Teraz si naklonuje náš tučný text a pridáme ho na začiatok tohto odseku. Využijeme na to funkcii prependTo():

$('b').clone().prependTo("p");

výsledok:

Ukážka # 6

Ako ďalšie si ukážeme ako skopírovať odsek a vložiť ho za ten náš. Na to si opäť pomôžeme metódou insertAfter().

$('p').clone().insertAfter('p');

výsledok:

Vidíme, že je to jednoduché.

Ukážka # 7

Ukážeme si nakopírovaniu odseky, vloženie ho za náš odsek a následnú zmenu tohto odseku za element <div>, ktorému samozrejme zachováme obsah. To všetko po kliknutí na odsek.

Môžeme postupovať napr. Nasledovne:

$('p').on('click', function() {
    let obsah = $(this).html();
    $(this).clone().insertAfter($(this));
    $('p:last').replaceWith('<div>' + $('b').text() + obsah + '</div>')
});

Živé demo:

Ukážka # 8

Ako posledné si ukážeme klonovanie divu s obsahom "Baf!", Ktorý si vytvoríme. Predošlé elementy môžeme opäť zakomentovat.

<div>
 Baf! </div>

Na element navešiame udalosť on('click'), kde ho vždy naklonuje.

$('div').on('click', function(){
    $(this).clone().insertAfter( $(this) );
});

Živé demo:

Skúste si to. Po kliknutí na prvý <div> nám všetko funguje, ale klikať na ostatné nemôžeme. To preto, že sa nám nenaklonovaly pridelené udalosti na elementu. To môžeme ľahko napraviť, stačí odovzdať ako parameter funkcie clone() hodnotu true.

$('div').on('click', function() {
    $(this).clone(true).insertAfter($(this));
});

A teraz nám všetko funguje.

To je pre dnešné lekciu všetko. V budúcej lekcii, Odstraňovanie obsahu v jQuery (DOM) , sa budeme venovať odstraňovaní obsahu v jQuery

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.