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

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

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.

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.

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

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... :(

#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.

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

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