Forum : class différente dans une boucle

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.

betaWeb

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

Auteur

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

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

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

@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

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

class différente dans une boucle

6 réponses