Nth-child v javascriptu – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

Nth-child v javascriptu – JavaScript, AJAX, jQuery – Fórum – Programujte.comNth-child v javascriptu – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 

Spidy
~ Anonymní uživatel
4 příspěvky
5. 3. 2015   #1
-
0
-

Ahoj všem,

napsal jsem si pár jednoduších funkcí, který mění cssko jednomu divu. Používám pro to něco na způsob

(IDdivu.style.height !== '80px')

třeba.. Ale teď mám v tom divu <ul> <li> .. seznam a chtěl bych javascriptem měnit styl jednotlivým položkám v něm aniž bych těm položkám přiřazoval id nebo třídu. Tedy něco jako lze v css použít selector nth-child, v tomto případě

#IDdivu li:nth-child(n+5) {color:Red;} ...

alá jestli se tohle

#IDdivu {color:red;} rovná tomuhle (IDdivu.style.color !== 'red')

čemu se pak rovná tohle ??

#IDdivu li:nth-child(n+5) {color:Red;} ??

na netu jsem toho moc nenašel, no spíš nevim jak to hledat.. za každou radu díky :)

Nahlásit jako SPAM
IP: 94.113.156.–
peter
~ Anonymní uživatel
4016 příspěvků
6. 3. 2015   #2
-
0
-

google = nth-child
https://developer.mozilla.org/…S/:nth-child
https://css-tricks.com/…child-works/

Tva otazka mi prijde podivna. Pokud jsi psal to css, tak vis, pro jaky element jsi to delal. Podle toho napsat javascript uz je snadne.
n + 5
n je cislo radku, cislovani zacina nulou
5 je pet
radek 0: 0 +5
radek 1: 1 + 5
Kdyz nevis, udelej si tabulku <table> s radky a uvidis, ktere se ti zabarvi.

#IDdivu {color:red;} rovná tomuhle (IDdivu.style.color !== 'red')
Nerovna se. Kdyz to nastavis pres css, tak to neni v tom elementu. Zustane to v css. V elementu bys to mel jako
<span id=IDdivu style="color:red;">
Mimo to je vyhodnejsi carovat s className (class="") nez menit barvu. Muzes si pak vzhled nastavit pres css.

Nahlásit jako SPAM
IP: 2001:718:2601:1f7:79bc:52...–
peter
~ Anonymní uživatel
4016 příspěvků
6. 3. 2015   #3
-
0
-

Dobre je prave to vysvetleni tu
https://developer.mozilla.org/…S/:nth-child

2n+1 je totez jako odd
2n je totez jako even
n=0: 2*0 = 0, pro +0 je to radek 0, pro +1 je to radek 1
n=1: 2*1 = 2, pro +0 je to radek 2, pro +1 je to radek 3 ...

n + 5 je jakoze jde radek po radku, bez nasobeni
n=0: 0, pro +5 je to radek 5
n=1: 1, pro +5 je to radek 6 ...
cili od radku 5 to bude vsechno obarvene.

jestli to chces vyjadrit nejak programove, tak 

<script>
var a,b,n,m;
// a * n + b
m = 10;	// prvnich 10 radku, pro ktere vzorec vyhovuje
a = 1; b = 5; for(n=0; n<m; ++n) {document.write((a*n+b)+" ");}; document.write('<br>');
a = 2; b = 0; for(n=0; n<m; ++n) {document.write((a*n+b)+" ");}; document.write('<br>'); // even
a = 2; b = 1; for(n=0; n<m; ++n) {document.write((a*n+b)+" ");} // odd
</script>

Taky byl kdysi problem v tom, co chape IE jako node a co FF. Jestli tam mas kod pres el.childNodes, tak tam v jednom prohlizeci muzes mit i textnody, ktere jsi necekal, nejen elementy a ve druhem zas bez nich. Je tam pak dobre kontrolovat typ nodu v cyklu.

Nahlásit jako SPAM
IP: 2001:718:2601:1f7:79bc:52...–
Spidy
~ Anonymní uživatel
4 příspěvky
6. 3. 2015   #4
-
0
-

Dík za odpovědi, ale asi sem se blbě zeptal. Nejde o css, to tak nějak umím, plavu v javascriptu. Vím, že ty dvě věci nejsou ekvivalent. Jde o to, že javascriptem umím přestylovat nějaký konkrétní prvek co má přiřazené id nebo class. Ale jak javascriptem určím konkrétní prvek co id nebo class nemá? Tedy v případě <li> seznamu v css použiju li:nth-child, jaký je pro to ekvivalent v javascriptu?

Resp. potřebuji určit konkrétní <li> v konkrétním divu. V css použiju #IDdivu li:nth-child(6) ... a když to pak chci přestylovat javascriptem třeba dle kliknutí uživatele? Volat jsko po kliknutí někde umim, jak ale v jsku zapíšu to li:nth-child...

dík

Nahlásit jako SPAM
IP: 94.113.156.–
Spidy
~ Anonymní uživatel
4 příspěvky
6. 3. 2015   #5
-
0
-

resp. neumím moc javascript, ten javascript co jsi mi sem napsal nepřelouskám.. chci na kliknutí na ikonku stejně jednoduše jako změním css nečemu s ID změnit css li prvku bez ID... :(

Nahlásit jako SPAM
IP: 94.113.156.–
peter
~ Anonymní uživatel
4016 příspěvků
9. 3. 2015   #6
-
0
-

#IDdivu li:nth-child(6)

o = document.getElementById('IDdivu');
o = o.getElementsByTagName('LI'); // ve starsich prohlizecich nefunguje; a pokud mas ul-li strom, tak bys musel jit pres childnode a nodetype
o = o[6];

Si treba najdi neco o javascript jquery, tam muzes pracovat s css zapisem.

https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes (1)
https://developer.mozilla.org/…ode/nodeType (nodeType==1) (2)

V html to funguje tak, ze mas strom s html elementy. Jenze ruzny prohlizec chape ruzne veci jako elementy.

UL
UL LI text

nebo jiny prohlizec

UL text // novy radek za tagem se projevi jako text element, pro funkci childNodes v tabulce odkaz 2 je to
nodeType == 3 (TEXT_NODE)
LI text

ChildNodes ti tedy vrati deti, potomky, childs. Zkratka elementy v urovni 2. Jenze tam muzou byt ty text nody a musi se to pak podminkou vytridit. jinak ti nebude sedet poradi, cili 6 bude v jinem prohlizeci 8, treba.

GetElementsByTagName ti vrati vsechny elementy LI, bez tech textu, ale ve vsech urovnich. Cili treba pro

UL1
UL1 LI1 text ULa LIa text
UL1 LI1 text ULa LIb text
UL1 LI2 text

ti pouziti te funkce na prvni urovni UL1 vrati 4x LI, pouziti na druhe urovni ULa ti vrati 2xLI.

Jinymi slovy, obdoba toho, co chces se v JS pise jako cyklus pro prochazeni elementu (snadno najdes googlem na slova nodeType a childNodes nebo si napises sam). Neni na to primo funkce.

Nahlásit jako SPAM
IP: 2001:718:2601:1f7:2564:67...–
Spidy
~ Anonymní uživatel
4 příspěvky
10. 3. 2015   #7
-
0
-

Ahoj, díky za Tvoji vyčerpávající odpověď. Já mezitim zjistil, že musim jít jinudy. Chtěl jsem rozbalovací div a to kolik je v něm obsahu uchovávat v cookie. Ale hrát si s css display u jednotlivejch li uvnitř divu a pak je chtít číst javascriptem a uchovávat v cookie ze zdá moc.

Teď to řeším přes pevné nastavení height v px a overflow hidden, v cookie se uchovává jen třímístné číslo, tj. výška divu v px..

I tak Ti ale moc děkuji :)

Nahlásit jako SPAM
IP: 94.113.156.–
peter
~ Anonymní uživatel
4016 příspěvků
11. 3. 2015   #8
-
0
-

Aha. To bys mel jednodussi nez jsem myslel. Ty si ty elementy ocislujes pres js predem. Pak te rozdil v prohlizecich uz trapit nemusi, ikdyz bude mit kazdy jine cislovani.
Ta vyska je taky reseni, asi.

Rozbalovaci menu jsem kdysi delal, mozna bude jeste funkcni.
http://peter-mlich.wz.cz/…alovaci.html

Nahlásit jako SPAM
IP: 2001:718:2601:1f7:486:d4e...–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 7 hostů

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032024 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý