4. díl - Nahrazování obsahu & klonování v jQuery (DOM)

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

V tomto článku si ukážeme jak můžeme manipulovat s jQuery pomocí nahrazování obsahu, vyzkoušíme si i různé možnosti na příkladech. Také si ukážeme klonování.

Začneme tím, že si vytvoříme HTML soubor a JS soubor.

Do JS si vložíme základní kostru.

$(function(){
  ... kód ...
});

Nahrazování obsahu

Každý asi chápe co mají tyto funkce za účel, mají nám nahradit shodné elementy něčím jiným, to se dá, ač se to možná i nezdá, dobře využít, jelikož tato funkce nám může pomoci minimalizovat kód.

Jedná se o tyto dvě funkce .replaceAll() a .replaceWith(), mezi jimiž je takovýto rozdíl:

A.replaceAll(B) - nahradí B Ačkem

A.replaceWith(B) - Nahradí A Bčkem

No, a jaký je tedy rozdíl mezi .replaceAll/Wit­h() a .html() či .text()? Hodně velký, jelikož funkce .html() a .text() nahrazují pouze obsah - tedy content - elementu, kdežto .replaceAll/With() nahrazuje element kompletně, tedy i se značky elementu. Toto už je o hodně zábavnější, že? :)

Takže, ukážeme si také nějakou ukázku a několik způsobů použití. Vytvoříme si tedy asi takovýto HTML soubor:

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

Také si rovnou nastylujeme CSS, kam přidáme styly pro odstavec a 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;
}

Nyní si tedy můžeme ukázat pár ukázek, jak můžeme použít funkci na nahrazení obsahu.

Ukázka #1

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

Je to úplně jednoduché a ukážeme si hned kód v JS:

$('p').replaceWith('<div> Nahrazeno </div>');
Nahrazování obsahu v jQuery

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

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

Samozřejmě nám to udělá úplně stejný výsledek jako v minulém případě. Pojďme tedy na něco zajímavějšího.

Ukázka #2

Uděláme si náhradu z našich odstavců na divy s obsahem "Knock" a posledím "Penny!". Dobře, každý asi ví jak to udělat.

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

Jasně, takto to funguje jak potřebujeme, ale není to moc dobré. Teď to 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, to už by bylo dost znát.

Nahrazování obsahu v jQuery

Ukažme si tedy jak to vyřešit podle mne lépe. Uděláme to pomocí funkce .not(), což je takový "doplňující selektor".

Jako první si určíme odstavce, které nejsou poslední. Tady 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 "Penny!".

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

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 .each() pro použití na všech odstavcích, poté si ukážeme jak to udělat pomocí .on('click').

Vytvoříme si tedy na selektoru pro odstavce funkci .each(), která bude jako parametr funkce obsahovat anonymní funkci ve které budeme pokračovat s kódem. Do ní dáme proměnnou obsah, která nám zjistí obsah elementu a následně přepíšeme element.

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

Všechno to je poměrně jednoduché. Ukažme si tedy tento samý příklad na .on('click'), zde přepíšeme jen v podstatě .each() na .on() a jinak vše bude fungovat stejně. Zanechme si předešlý kód a pojďme měnit po kliku div na odstavec.

$('div').on('click', function(){
   var obsah = $(this).html();
   $(this).replaceWith('<p>' + obsah + '</p>');
});
Nahrazování obsahu v jQuery

Klonování

V jQuery máme funkci i na klonování, tedy kopírování. Tuto funkci můžeme využít v řadě případů a následně jí třeba i modifikovat.

Pro klonování tu je funkce .clone(). Pojďme si ukázat jak funguje!

Jednoduše vždy přidáme za náš selektor .clone() a element se nám zkopíruje, avšak nevypíše!

Uděláme si v HTML nový obsah, ty předešlé třeba zakomentujeme. Udělejme si toto:

<b>Hello</b>

Ukázka #4

Nyní si zkusme naklonovat tento text a následně ho vložit za náš.

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

Povedlo se. Funkce .clone() nám tedy jen zkopíruje element (něco jako copy - CTRL + C), ale nevloží nám nic. Na to tu máme další funkce, které najdete zde.

Ukázka #5

Přidejme si do html také odstavec:

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

Nyní si naklonujeme náš bold text a přidáme ho na začátek odstavce. To uděláme pomocí funkce .prependTo().

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

Ukázka #6

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

$('p').clone().insertAfter('p');
Klonování obsahu v jQuery

Vidíme že je to jednoduché.

Ukázka #7

Ukážeme si nakopírování odstavce, vložení ho za náš odstavec a následně ho změníme na div, kterému samozřejmě zachováme obsah. To všechno po kliku na odstavec.

To můžeme udělat třeba takto:

$('p').on('click', function(){
   var obsah = $(this).html();
   $(this).clone().insertAfter( $(this) );
   $('p:last').replaceWith('<div>' + $('b').text() + obsah + '</div>')
});
Klonování obsahu v jQuery

Ukázka #8

Jako poslední si ukážeme klonování divu s obsahem "Baf!", který si vytvoříme, předešlé elementy zase zakomentujeme.

<div> Baf! </div>

Přidáme na něj událost .on('click'), kde ho vždy naklonujeme.

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

Zkuste si to, po kliku 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 však můžeme lehce napravit, stačí přidat jako parametr funkce .clone() hodnotu true.

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

A nyní nám vše funguje.

Klonování obsahu v jQuery

To je pro dnešek vše, příště si ukážeme další super věci. :)


 

Stáhnout

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

 

  Aktivity (1)

Článek pro vás napsal Honza Bittner
Avatar
Autor je vášnivý web developer. Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)

Jak se ti líbí článek?
Celkem (13 hlasů) :
55555


 


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)

 

 

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

Avatar
Honza Bittner
Redaktor
Avatar
Honza Bittner:

Ahoj, jaké oba chybící jquery tu nejsou napsané? :)

Odpovědět 4.5.2014 15:45
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Jirka
Člen
Avatar
Odpovídá na Honza Bittner
Jirka:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

Tohle, je to obsažené ve zdrojovém kódu, ale ten já stahuji, až když opravdu nevím "kudy". Jen by stačilo zmínit v tom seriálu, bez toho mi to nefungovalo. Jinak skvělá práce :)

 
Odpovědět 4.5.2014 17:15
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Jirka
Honza Bittner:

Toto je zmíněno v některém z předchozích dílů. Nemá smysl to psát do každého článku. ;)

Odpovědět 4.5.2014 17:22
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Jirka
Člen
Avatar
Odpovídá na Honza Bittner
Jirka:

Ano, to máte pravdu, ale v tom dílu konkrétně 5. bylo:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

A s tímto jquery ty vaše javascripty nefungovaly. Já jen, aby případným nováčkům jako já to pak nezamotalo hlavu, mořil jsem se s tím a hledal jsem kde je chyba :) Samozřejmě možná je to jinak a jen jsem hloupý já, kdo ví :)

 
Odpovědět 4.5.2014 17:58
Avatar
jos.pekar
Člen
Avatar
jos.pekar:

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 13.9.2014 19:27
Avatar
Bebbana
Člen
Avatar
Bebbana:

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. dubna 13:18
 
Odpovědět 27. dubna 13:15
Avatar
Bebbana
Člen
Avatar
Odpovídá na Bebbana
Bebbana:

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. dubna 13:28
Avatar
David Hanč
Člen
Avatar
David Hanč:

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. listopadu 20:30
Avatar
Odpovídá na David Hanč
Štefan Pružinský:

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. listopadu 21:15
Najefektívnejším spôsobom debuggingu je modlitba. :)
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 17. Zobrazit vše