Letní akce! Lákají tě IT školení C#, Javy a PHP v Brně? Přihlas se a napiš nám do zpráv kód "BRNO 500" pro slevu 500 Kč na libovolný brněnský kurz. Lze kombinovat se slevami uvedenými u školení i použít pro více kurzů. Akce končí 28.7.

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

JavaScript jQuery Nahrazování obsahu & klonování v jQuery (DOM)

Unicorn College ONEbit hosting Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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 opět 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:

Your page
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:

Your page
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:

Your page
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.

Your page
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:

Your page
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:

Your page
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:

Your page
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:

Your page
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:

Your page
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:

Your page
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:

Your page
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:

Your page
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:

Your page
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.

Your page
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 :)


 

Stáhnout

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

 

 

Článek pro vás napsal Honza Bittner
Avatar
Jak se ti líbí článek?
18 hlasů
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Miniatura
Předchozí článek
Vkládání obsahu v jQuery (DOM)
Miniatura
Všechny články v sekci
Základy jQuery
Miniatura
Následující článek
Odstraňování obsahu v jQuery (DOM)
Aktivity (3)

 

 

Komentáře
Zobrazit starší komentáře (11)

Avatar
jos.pekar
Člen
Avatar
jos.pekar:13.9.2014 19:27

Ahoj. Ten script s kliknutím mi též nefungoval. Poupravil jsem kód do následující podoby a vše funguje:
$('div').clic­k(function(){
var obsah = $(this).html();
$(this).repla­ceWith('<p>' + obsah + '</p>');
});

 
Odpovědět  -1 13.9.2014 19:27
Avatar
Bebbana
Člen
Avatar
Bebbana:27.4.2016 13:15

Já to upravila takhle:

$(function(){
    $('p').each(function(){
       var obsah = $(this).html();
       $(this).replaceWith('<div>' + obsah + '</div>');
       $('div').click(function(){
           $(this).replaceWith('<p>' + obsah + '</p>');
       });
});
Editováno 27.4.2016 13:18
 
Odpovědět 27.4.2016 13:15
Avatar
Bebbana
Člen
Avatar
Odpovídá na Bebbana
Bebbana:27.4.2016 13:28

Oprava, takhle:

$(function(){
    $('p').each(function(){
       var obsah = $(this).html();
       $(this).replaceWith('<div>' + obsah + '</div>');
       $('div').click(function(){
           $(this).replaceWith('<p>' + obsah + '</p>');
       });
    });
});
 
Odpovědět 27.4.2016 13:28
Avatar
David Hanč
Člen
Avatar
David Hanč:4.11.2016 20:30

Dobří lidé, poraďtě co s tím je špatně? Asi to bude uplně něco triviálního, ale uniká mi to.

<!DOCTYPE html>
<html lang="cs-cz">
<head>
<meta charset="UTF-8" />

<meta name="description" content="DOM manipulace v jQuery" />
<title></title>

<script src="http://a­jax.googleapis­.com/ajax/lib­s/jquery/1.10­.2/jquery.min­.js"></script>

<script src="js1.js"></scrip­t>

<link rel="stylesheet" href="css.css" type="text/css"/>
</head>
<body>
<p> Chci </p>
<p> Pozdravit </p>
<p> Penny </p>

<p class="last">! </p>

</body>
</html>

javascript:

$('div').on('clic­k', function(){
var obsah = $(this).html();
$(this).repla­ceWith('<p>' + obsah + '</p>');
});

 
Odpovědět 4.11.2016 20:30
Avatar
Odpovídá na David Hanč
Štefan Pružinský:4.11.2016 21:15

Pokúšaš sa pracovať s neexistujúcim div-om. Najprv je potrebné výtvoriť div, a až následne je s ním možné pracovať. :)
Taktiež Ti odporúčam načítavať JavaScript až na konci súboru. Dôvodom je správna funkcionalita DOM. Veľa zdaru! :)

Odpovědět 4.11.2016 21:15
Najefektívnejším spôsobom debuggingu je modlitba. :)
Avatar
David Hanč
Člen
Avatar
 
Odpovědět  +1 7.11.2016 21:48
Avatar
arnost99
Člen
Avatar
arnost99:30.10.2017 4:54

Možná bych ještě zmínil (když už bylo zmíněno :first a :last) využitelnost ":even" a ":odd", které vyberou pouze sudé a liché selektory...

Editováno 30.10.2017 4:55
 
Odpovědět 30.10.2017 4:54
Avatar
Karel Labonek:19. dubna 7:56

Ahojki, rád bych v ukázce č.3 docílil toho že po kliknutí se "p" přepíše na "div" a po dalším kliknutí zase "div" na "p" a takto pořád dokola, něco mi zřejmě uniká :-( . Má někdo nějaký nápad :-) . Děkuji

 
Odpovědět 19. dubna 7:56
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Karel Labonek
Honza Bittner:19. dubna 18:25

No, tady to budeš muset udělat jinak, jelikož všechny tyto eventy, které se píšou v kódu, se zaregistrují jen pro ty elementy, které již jsou v DOMu. Pokud do DOM přidáš nějaký další element, tyto eventy již nebude mít zaregistrovány.

Dá se to udělat různými způsoby, jeden z jednodušších je například zaregistrovat event na dokument, který bude event jakoby předávat dál. To uděláš nějak takto:

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

$(document).on("click","div",function() {
  var obsah = $(this).html();
  $(this).replaceWith('<p>' + obsah + '</p>');
});
Odpovědět  +1 19. dubna 18:25
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Odpovídá na Honza Bittner
Karel Labonek:19. dubna 18:33

Děkuji za odpověď, no já jsem nedočkavej, když jsem pokračoval v dalších lekcích odpovědi jsem našel :-) (například se mi líbí stylování pomocí přidávání a odebírání tříd) . super články děkuji.

 
Odpovědět  +1 19. dubna 18:33
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 21. Zobrazit vše