class différente dans une boucle

Par donny, il y a 10 ans

Javascript

Bonjour,

Je me trouve face un petit soucis dans une boucle.
Je genere des liste grace a une boucle en PHP
et j'ai une classe "pull-left"
sauf que je doit faire en sorte que une fois il y a une li avec la class "pull-left" et une seconde fois une class "pull-right"
J'ai reflechi comment je peux faire cela en JS mais je ne trouve pas une solution "convenable" à ce genre de besoin.
Si quelqu'un a une idee :)

Je vous remercie d'avance.

6 réponses

betaWeb, il y a 10 ans

Salut,

Il faut regarder du côté des temporisations (setTimeout() et setInterval()):

var elems = document.querySelectorAll('.pull-left'); setTimeout(function() { // Le callback sera exécuté après 1000ms, soit 1s Array.prototype.forEach.call(elems, function(elem) { elem.classList.remove('pull-left'); elem.classList.add('pull-right'); }); }, 1000);
donny, il y a 10 ans

Salut betaWeb,
Merci pour ta reponse rapide.
J'ai essayer de cete facon mais le resultat n'est pas "parfait"
normalement des que je load la page j'obtient:

<li class ="pull-right">...</li>``` ainsi de suite.
AlexJM, il y a 10 ans
var elems = document.querySelectorAll('.pull-left'); var change = false; Array.ptototype.forEach.call(elems, function(elem) { if(change){ elem.classList.remove('pull-left'); elem.classList.add('pull-right'); } change = !change; });

Si j'ai bien compris ce que tu voulais..

betaWeb, il y a 10 ans

Ceci devrait fonctionner, si on part du principe que tous tes éléments ont la classe 'pull-left' au chargement de la page.

var elems = document.querySelectorAll('.pull-left'); Array.prototype.forEach.call(elems, function(elem, index) { if (0 != index % 2) { elem.classList.remove('pull-left'); elem.classList.add('pull-right'); } });
Maenhyr, il y a 10 ans

@betaWeb, on peut simplifier ton code :

var elems = document.querySelectorAll('.pull-left'); elems.forEach(function(elem, index) { if (0 != index % 2) { elem.classList.remove('pull-left'); elem.classList.add('pull-right'); } });
betaWeb, il y a 10 ans

@prbaron Je le sais mais c'est pour une question de compatibilité cross-browsers que je passe par le prototype ;)