Diskuze – Lekce 2 - Vkládání obsahu 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

David Koníček

Člen

David Koníček:19.12.2017 13:01

Chce to opravit i ten příklad, protože takhle nebude fungovat tak jak má Ale jinak pěkný díl

Odpovědět

19.12.2017 13:01

Věř, běž a dokážeš!

Honza Bittner

Tvůrce

Honza Bittner:19.12.2017 13:06

Dohromady to bude nějak takto. Popisky (myslím ty věty nad kódy) jsou IMO dobře. Jen ty vysvětlení nahoře byla špatně.

Viz (po úpravě, která čeká na schválení):

A.after(B) - vloží B po A – A je cíl, B je obsah pro vložení

Zkusíme si tedy přidat po #vkladani .one div, který bude obsahovat "Ahoj, jsem vložený přes After". Divu přidáme ještě ID, jelikož s ním budeme pracovat dále.

$('#vkladani .one').after("<div id='pres_after'>Ahoj, jsem vložený přes <b>.after()</b></div>");

A.insertAfter(B) - vloží A po B – B je cíl, A je obsah pro vložení

Super, funguje to. Hned za #vkladani .one se nám vložil náš div. Teď zkusíme náš #pres_after vložit za #vkladani .two.

$('#pres_after').insertAfter( $('#vkladani .two') );

Odpovědět

19.12.2017 13:06

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Robin Mokrý

Člen

Robin Mokrý:1.8.2018 12:20

Dobrý den,
jsem jQuery úplný začátečník a mám takový možná hloupý dotaz.

$('#vkladani .three').append("<b>Ahoj, já jsem APPENDED</b>");
$("<i>Ahoj, já jsem APPENDEDTO</i>").appendTo('#vkladani .three');
$($('#vkladani .two').html()).appendTo($('#vkladani .three'));

Jaký mají v tomto případě vlastně význam $?
Proč na prvním a třetím řádku před #divem znak $ je a na druhém řádku tam není? Pokud ho tam vložím, funguje to navíc stejně.

Děkuji za odpověď.

Editováno 1.8.2018 12:21

Odpovědět

1.8.2018 12:20

Zdeněk Jeřábek

Člen

Zdeněk Jeřábek:16.11.2021 15:42

Dosti nepřehledné, v ukázkách se téměř nic nemění a naprosto chybí nějaký konkrétní příklad, proč bychom něco takového vůbec chtěli dělat.

Odpovědět

16.11.2021 15:42

Marcel Sup

Člen

Marcel Sup:20.1.2022 17:00

Nezdá se mi relevantní ukázka (výsledek), která dokumentuje funkci insertAfter(). Je naprosto totožná s předchozí ukázkou, která dokumentuje funkci after() - tam je to v pořádku a souhlasí to, ale u té funkce insrtAfter() mám o ukázce, která má dokumentovat výsledek po použití funkce, velké pochybnosti.

Odpovědět

20.1.2022 17:00

Petr Svoboda

Člen

Petr Svoboda:4.2.2022 0:29

Kód uvedený v této lekci nefunguje. Resp. fugnuje, ale pouze v jQuery verzi 1.10.2, která je použita ve vzorovém řešení ke stažení.
S touto verzí .unwrap('<article></article>') funguje.

Nám ale bylo v 1. lekci řečeno, abysme používali verzi 3.2.1 a to už .unwrap('<article></article>') nefunguje.
A co je horší, nefungují pak ani následující příkazy wrapAll a wrapInner. To vůbec nechápu proč a byl bych rád, aby někdo vysvětlil jak může jeden nefunkční příkaz na nějakém prvku (Ahoj, jsem vložený přes .before) zcela znefunkčnit následující příkazy, které se týkají úplně jiných prvků.

Libor Sitek výše navrhuje použít .unwrap($('<article></article>')). To je ovšem pseudořešení. Ve skutečnosti to tagy <article></article> vůbec neodstraní. Ale způsobí to, že začnou fungovat následující příkazy wrapAll a wrapInner, takže výsledek pak vypadá přibližně stejně, jako ve vzorovém řešení (ne však úplně stejně).

Autor kurzu by měl ukázat, jak požadovaného výsledku dosáhnout s aktuální verzí jQuery.

Odpovědět

4.2.2022 0:29

Jaroslav Drobek

Člen

Jaroslav Drobek:12.5.2022 21:21

Když to vezmu zčerna: kdoví, jestli po tolika letech autor ještě je...přemýšlím, co jsem já dělal před 5, 10 lety 😨

Odpovědět

12.5.2022 21:21

Jaroslav Drobek

Člen

Jaroslav Drobek:12.5.2022 21:25

Hodnocení:

prepend(): vidím ještě jeden rozdíl - připojením vznikly dva sloupce, zatímco u append() se připojovalo do původního sloupce.
Příklad na insertAfter() je zmatečný: používá se řetězec s obsahem demonstrujícím after() a je zařazen nesprávný výsledek (totožný s výsledkem after()).
Jaká změna by měla být vidět na výsledku použití wrap()? Bez dlouhého zírání ho vidím jako identický s předchozím; totéž u příkladů na unwrap() a wrapAll()..

Odpovědět

12.5.2022 21:25

Lubor Pešek

Člen

Lubor Pešek:24.6.2022 14:35

Trošku nechápu jednu věc.
Když se zamýšlím, jak asi ten wrapper funguje, tak předpokládám, že stejně pracuje nějak s tím textem, který mu tam vložíme jako parametr. Díky tomu, že je možné tam vložit i několik tagů najednou, tak nechápu, na co je tam potřeba jednak ta syntaxe špičatých závorek a hlavně párový tag.
Když už taková funkce existuje, tak proč nepsat jednoduše pouze názvy těch tagů? (v podstatě to samé, co v JS existuje při vytváření elementu).

//Píšu přece:
document.createElement("tag");
//Nepíšu:
document.createElement("<tag></tag>");

//Tak podobná syntaxe by v podstatě mohla fungovat i tady, nebo ne?
//Místo:
$("#idElementu").wrap("<div></div>");
//napsat
$("#idElementu").wrap("div");
//to samé i pro vnořování a bylo by to hezké, že by to bral jako parametry (nemusel by nic splitit)
$("#idElementu").wrap( "div", "div", "p" "em" "b" );

Ale to je spíš asi pro autora této funkce.

Odpovědět

24.6.2022 14:35

Existují dva způsoby, jak vyřešit problém. Za prvé vyhoďte počítač z okna. Za druhé vyhoďte okna z počítače.

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 9 zpráv z 29.

Nejčastěji vyhledáváné

Diskuze – Lekce 2 - Vkládání obsahu v jQuery (DOM)