NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
Mezinárodní den IT společnosti je tady! Pouze nyní můžeš získat 90 % extra kreditů při nákupu od 1199 kreditů s promo kódem AJTACI90. Tak neváhej!

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

Zpět

Upozorňujeme, že diskuze pod našimi online kurzy jsou nemoderované a primárně slouží k získávání zpětné vazby pro budoucí vylepšení kurzů. Pro studenty našich rekvalifikačních kurzů nabízíme možnost přímého kontaktu s lektory a studijním referentem pro osobní konzultace a podporu v rámci jejich studia. Toto je exkluzivní služba, která zajišťuje kvalitní a cílenou pomoc v případě jakýchkoli dotazů nebo projektů.

Komentáře
Avatar
Jirka
Člen
Avatar
Odpovídá na Honza Bittner
Jirka:4.5.2014 17:58

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: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
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
Štefan Pružinský
Tvůrce
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á na Štefan Pružinský
David Hanč:7.11.2016 21:48

Děkuji

 
Odpovědět
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
Člen
Avatar
Karel Labonek:19.4.2018 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.4.2018 7:56
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Karel Labonek
Honza Bittner:19.4.2018 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
19.4.2018 18:25
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
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 24.