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
elementema
a.replaceWith(b)
- nahradía
elementemb
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š.
Stáhnout
Stažením následujícího souboru souhlasíš s licenčními podmínkami
Staženo 545x (7.22 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript