Lekce 3 - Nahrazování obsahu & klonování v jQuery (DOM)

V minulé lekci, Vkládání obsahu v jQuery (DOM), jsme se naučili různé způsoby vkládání obsahu pomocí javascriptové knihovny jQuery.

V dnešním tutoriálu si ukážeme nahrazování obsahu, vyzkoušíme si různé způsoby na příkladech. Také si ukážeme klonování.

Začneme zas tím, že si vytvoříme HTML soubor a JS soubor. Do JS souboru si vložíme základní kostru s Document Ready událostí:

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

Nahrazování obsahu

Následující metody nám nahradí existující elementy jinými. To můžeme, ač se to možná i nezdá, dobře využít ke zkrácení našeho kódu.

Metody se nazývají replaceAll() a replaceWith(), je mezi nimi následující rozdíl:

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

Důležité je uvědomit si rozdíl mezi metodami z minulé lekce, jako byly html() či text() a mezi metodami replaceAll()/replaceWith(). Tyto již nenahrazují jen obsah elementu, ale kompletně celý element. Toto již je o hodně zábavnější, že?

Udělejme si nějakou ukázku a představme si různé způsoby použití. Vytvoříme si tedy takovýto HTML soubor:

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

Také si rovnou upravíme CSS, kam přidáme styly pro odstavce <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 zatím vypadá takto:

Ukázek na nahrazení obsahu si uděláme několik.

Ukázka #1

Jako první si ukážeme jednoduché nahrazení našich odstavců za elementy <div>, které budou obsahovat text "Nahrazeno".

Je to úplně jednoduché, ukažme si rovnou kód v JavaScriptu:

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

Výsledek:

Skvělé, vše nám hezky funguje. Ukážeme si rovnou i použití druhého způsobu, tedy replaceAll().

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

Samozřejmě získáme úplně stejný výsledek jako v minulém příkladu:

Pojďme tedy na něco zajímavějšího.

Ukázka #2

Nahraďme naše odstavce na divy s obsahem "Knock", přičemž ten poslední bude mít obsah "Penny!". Hláška pochází ze seriálu The Big Bang Theory, kdy jeden z hlavních protagonistů takto klepe na dveře své sousedky. Asi tušíte jak to udělat.

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

Kód funguje jak potřebujeme, ale není moc dobrý. Teď samozřejmě nevadí, že přepisujeme jeden element 2x, ale zkuste si to třeba na pár stovkách elementů, například u nějaké hry či aplikace, tam bychom již zbytečně plýtvali výkonem.

Ukažme si tedy jak úkol vyřešit lépe. Využijeme metody not(), která vybere elementy, které neodpovídají danému selektoru.

Jako první si vybereme odstavce, které nejsou poslední. Zde použijeme not('p:last'):

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

A hned za to doplníme nahrazení posledního odstavce za <div> s obsahem "Penny!".

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

Výsledek:

Jednoduché a určitě lepší

Ukázka #3

Ukážeme si jak můžeme změnit jen značku elementu a zachovat při tom jeho obsah. Na to nám poslouží například metoda each(), kterou použijeme na všech odstavcích.

Na vybraných odstavcích tedy zavoláme metodu each(), která spustí pro každý odstavec předanou funkci. V ní definujeme proměnnou obsah, kam si uložíme současný obsah elementu a následně element přepíšeme.

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

Výsledek:

Celé je to poměrně jednoduché. Udělejme si ten samý příklad, kdy k přepsání dojde až po kliknutí. Zde přepíšeme v podstatě jen each() na on('click') a jinak bude vše fungovat stejně. Ponechme si předešlý kód a pojďme změnit po kliknutí zpět <div> opět na odstavec <p>.

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

Živé demo v prohlížeči:

Klonování

V jQuery máme k dispozici i metodu pro klonování, tedy kopírování - clone(). Pojďme si ukázat jak funguje. Jednoduše vždy přidáme za náš selektor .clone() a daný element se nám zkopíruje, avšak do stránky se zatím nevloží!

Vytvoříme si v HTML nový obsah, ty předešlé např. zakomentujeme. Udělejme si následující příklad:

<b>Ahoj</b>

V prohlížeči zatím vypadá takto:

Ukázka #4

Nyní si zkusme tento text naklonovat a následně jej vložit za ten předchozí.

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

Výsledek:

Povedlo se. Metoda clone() nám tedy pouze zkopíruje element (něco jako když stiskneme Ctrl + C), ale zatím nám nic nevloží. Na vkládání máme metody, které jme si zmiňovali v minulé lekci - Vkládání obsahu v jQuery (DOM).

Ukázka #5

Přidejme si do HTML také odstavec:

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

Nyní si naklonujeme náš tučný text a přidáme jej na začátek tohoto odstavce. Využijeme k tomu funkci prependTo():

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

Výsledek:

Ukázka #6

Jako další si ukážeme jak zkopírovat odstavec a vložit jej za ten náš. Na to si opět pomůžeme metodou insertAfter().

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

Výsledek:

Vidíme, že je to jednoduché.

Ukázka #7

Ukážeme si nakopírování odstavce, vložení jej za náš odstavec a následnou změnu tohoto odstavce za element <div>, kterému samozřejmě zachováme obsah. To všechno po kliknutí na odstavec.

Můžeme postupovat např. takto:

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

Živé demo:

Ukázka #8

Jako poslední si ukážeme klonování divu s obsahem "Baf!", který si vytvoříme. Předešlé elementy můžeme opět zakomentovat.

<div> Baf! </div>

Na element navěsíme událost on('click'), kde jej vždy naklonujeme.

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

Živé demo:

Zkuste si to. Po kliknutí na první <div> nám vše funguje, ale klikat na ostatní nemůžeme. To proto, že se nám nenaklonovaly přidělené události na elementu. To můžeme lehce napravit, stačí předat jako parametr funkce clone() hodnotu true.

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

A nyní nám vše funguje.

To je pro dnešní lekci vše.

V příští lekci, Odstraňování obsahu v jQuery (DOM), se budeme věnovat odstraňování obsahu v jQuery

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.