Discussion :

[clavier12AZQSWX]

bonjour,



dans une page html, j'ai 3 pages, chacune symbolisées par des div ayant ce genre de class :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class="wpforms-page-indicator-page wpforms-page-indicator-page-1 "></div>
<div class="wpforms-page-indicator-page wpforms-page-indicator-page-2 active"></div>
<div class="wpforms-page-indicator-page wpforms-page-indicator-page-3 "></div>

Je souhaite placer un script qui s'exécute suivant la page active.
Dans mon exemple, il y a la classe "active" dans la deuxième ligne, donc la page2. je sais que c'est la page 2 car il y a la class "wpforms-page-indicator-page-2"

je cherche donc à écrire écrire en JS dom (pas en jquery) cette logique :

si il y a un div qui contient à la fois la class "wpforms-page-indicator-page-2" et la class "active" alors je suis en page2

mon code faisant cela est :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var enpage2= document.querySelectorAll('.wpforms-page-indicator-page-2 .active').length;
alert(enpage2);

mon code JS qui compte les div dans une page, retourne toujours 0, y-voyez-vous une raison ?

[Doksuri]

il ne faut pas mettre d'espaces dans le querySelector (comme en CSS) quand tu veux selectionner "plusieurs classes en meme temps"

document.querySelectorAll('.wpforms-page-indicator-page-2.active').length

[melka one]

jour

utilise classlist

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('element').classList.contains("nom_de_la_classe");

[Doksuri]

il pourrai, mais son element n'a pas d'id...

[melka one]

il lui reste plus qu'a en donner un ou utiliser une autre méthode de ciblage (querySelector,parentNode,firstChild....etc)

[NoSmoking]

Bonjour,
la signature de la méthode est très claire : document.querySelector(sélecteurs CSS), il suffit donc de mettre un sélecteur CSS conforme, voir réponse de Doksuri, et donc aucun besoin d'ID.

Si l'élément est le seul à avoir une classe active le sélecteur peut être dans ce cas plus simple.