Pur javascript: sélecteur spécifique

Version imprimable

Bonjour à tous,

voici mon script qui fonctionne sur la page web: https://cesmeglise.org/lectures-du-jour/
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 function hasClass(elem, className) { return elem.className.split(' ').indexOf(className) > -1; } function vrai () { var dots = document.getElementsByClassName('brp-paragraph')[0]; if (dots.style.display === "none") { dots.style.display = "inline"; } else { dots.style.display = "none"; } } document.addEventListener('click', function (e) { if (hasClass(e.target, 'brp-passage')) { alert('brp-passage'); vrai() } }, false);
Voici ce que je souhaite savoir:

j'aimerais que l'alerte 'brp-passage' ne soit pas sur tous les sélecteurs 'brp-passage',
c'est-à-dire par exemple document.getElementsByClassName('brp-paragraph')[0] ne prends que la première occurence de la classe 'brp-paragraph'

comment ne sélectionner que la première occurrence de la classe "brp-passage"

autrement dit: je ne sais pas où placer [0] dans le code ?

:):):)

Xzave

30/09/2022, 13h43
SpaceFrog

ben comme tu l'a fait dans ton exemple ...
sinon passe par querySlector

Bonjour,

Code:

1
2
3
4
5
6
7
if(document.querySelectorAll(".brp-passage")[0]===e.target){
  //c'est le premier élément
}
//ou bien 
if(document.querySelector(".brp-passage")===e.target){
  //c le premier élément
}

30/09/2022, 14h44
SpaceFrog

Code:

document.querySelector(".brp-passage")

Te retournera le premier element avec la class .brp-passage

querySelectorAll quand à lui te retournera une collection dont le premier élement sera le [0] comme a montré Toufik
ou avec item():

Code:

document.querySelectorAll(".brp-passage").item(0)
30/09/2022, 16h36
Xzave

Citation:

Envoyé par Toufik83

...

Réponse rapide merci mille fois. Elle fonctionne à merveille.

Je laisse le post ouvert pour la suite des évenements.

:):):)

Xzave

Résolution: entièreté du code Javascript + CSS

Bonjour,

je me permets ici de mettre mon code définitif afin de partager mes recherches:

voici le code Pure Javascript:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function vrai (i) {
	var ouvrirfermer =	document.getElementsByClassName('brp-paragraph')[i];
	ouvrirfermer.style.display = "inline"; 
	ouvrirfermer.style.position = "static";
}
var i,dots;
dots =	document.getElementsByClassName('brp-paragraph');
document.addEventListener('click', function (e) {
	for (i=0; i<dots.length; i++){
    if(document.querySelectorAll(".brp-paragraph")[i]===e.target) {
vrai(i);
    }
 }
}, false);

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.brp-paragraph{
position:relative;
overflow: hidden;
text-overflow:ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3; 
-webkit-box-orient: vertical;
}
 
.brp-paragraph::after {
display: block;
font-weight: bold;
content: "...Lire plus";
position: absolute;
bottom: 0;
right: 0;
background: white;
text-decoration: underline;
color: #a03737;
cursor:pointer;
}

(le plugin s'appelle "Bible Reading Plans" dans Wordpress)

Le résultat est sur la même URL qu'en début de Post,

merci pour votre aide,

:):):)

Xzave