IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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:

Tvoje stránka
localhost

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:

Tvoje stránka
localhost

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:

Tvoje stránka
localhost

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.

Tvoje stránka
localhost

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:

Tvoje stránka
localhost

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:

Tvoje stránka
localhost

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:

Tvoje stránka
localhost

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:

Tvoje stránka
localhost

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:

Tvoje stránka
localhost

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:

Tvoje stránka
localhost

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:

Tvoje stránka
localhost

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:

Tvoje stránka
localhost

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:

Tvoje stránka
localhost

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.

Tvoje stránka
localhost

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š.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 537x (7.22 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

Předchozí článek
Vkládání obsahu v jQuery (DOM)
Všechny články v sekci
jQuery - Dynamické doplňky webu snadno a rychle
Přeskočit článek
(nedoporučujeme)
Odstraňování obsahu v jQuery (DOM)
Článek pro vás napsal Honza Bittner
Avatar
Uživatelské hodnocení:
121 hlasů
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Aktivity