witam,

jak zrobić aby zmiana css była opóźniona w czasie dla każdego elementu np.

li:eq(1) zmiana tła po 1 sek.
li:eq(2) zmiana tła po 2 sek.
li:eq(3) zmiana tła po 3 sek.
... itd.

próbuje tak ale chyba idę zła drogą:

[XML] pobierz, plaintext 
var x = ('li').length;
var y = 0;
 
for(x, y; y<x; y++)
{
	setTimeout(function(){
 
		$('li:eq('+ y +')').css('background', 'blue');
 
	}, y * 1000);
}
[XML] pobierz, plaintext 

Sprawdź pierwszą linię.

Selectory w CSS zaczynają się od 1.
Możesz też to zrobić w czystym CSS.

nic to nie zmienia

jak robię tak jak napisałem czy od 0 czy 1 to style mi się zmieniają tylko dla pierwszego elementu.

w css więcej pisania, chciałem zrobić pętle w js dla ograniczania kodu.

Można w czystym CSS, ale to różne opóźnienie dla poszczególnych <li> byłoby upierdliwe do osiągnięcia, zwłaszcza jeżeli nie wiadomo z góry ile elementów będzie na liście.

Wersja jQuery:

[JAVASCRIPT] pobierz, plaintext 
$('li').each(function (index) {
    setTimeout(function (li) {
        $(li).css('background', 'blue');
    }, index * 1000, this);
});
[JAVASCRIPT] pobierz, plaintext 

Wersja JavaScript :

[JAVASCRIPT] pobierz, plaintext 
document.querySelectorAll('li').forEach((li, index) => {
    setTimeout(() => {li.style.background = 'blue';}, index * 1000);
});
[JAVASCRIPT] pobierz, plaintext 

P.S. Znalazłem bug na forum. Tekst "JavaScript :" bez spacji przed dwukropkiem zostaje zamieniony na "java script:" Musiałem więc dać spację przed dwukropkiem. Wiem, to straszne.