QuerySelectorAll, array.from( ).entries() et optimisation du code, conseils
Bonjour à Tous,
Samedi, je faisais un peu d'esprit sur ce vieux sujet
=>
https://www.developpez.net/forums/d384620/webmasters-developpement-web/javascript-
ajax-typescript-dart/javascript/recuperer-id-d-page/
où danielhagnoul me remettait gentillement en place d'ailleurs ;)
Force est de constater que ce code initial
=>
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
function Eject(MaClassName){
const INIT_ELT = 1;
if (MaClassName !="") {
// suppression des modules pour une CLASSE donnée => MaClassName
var elemclass = document.getElementsByClassName(MaClassName);
var elementsLength = elemclass.length;
for (var i = 0 ; i < elementsLength ; i++) {
elemclass[i].innerHTML="";
}
// suppression dans le module de contrôle MODCONT pour l'ID donné => MaClassName
var elemid = document.getElementById(MaClassName);
elemid.parentNode.removeChild(elemid);
}
// Verification du nombre de lignes dans MODCONT
var length = document.getElementById('btn-hide').getElementsByTagName('p').length;
// Si plus rien ne reste à part une ligne d'introduction, on supprime MODCONT en utilisant sa classe => 'btn-hide'
if (length == INIT_ELT) {
var elemrest = document.getElementsByClassName('btn-hide');
var elemrestLength = elemrest.length;
for (var j = 0 ; j < elemrestLength ; j++) {
elemrest[j].innerHTML="";
}
}
}; |
gagne en clarté avec ce "nouveau" code finalement bien plus clair
=>
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
function Eject(MaClassName){
const INIT_ELT = 1;
if (MaClassName !="") {
const MesElemClass = document.querySelectorAll('.'+MaClassName);
for ( let [ i, id ] of Array.from( MesElemClass ).entries() ) {
id.innerHTML=""
}
const MonId = document.querySelectorAll('#'+MaClassName);
for ( let [ i, id ] of Array.from( MonId ).entries() ) {
id.parentNode.removeChild(id);
}
}
// Verification du nombre de lignes dans MODCONT
const LigModcont = document.querySelectorAll('div#btn-hide>p');
var compt =0;
var monid;
for ( let [ i, id ] of Array.from( LigModcont ).entries() ) {
compt=compt+1;
monid=id;
}
if (compt == INIT_ELT) {
const MesElemClass = document.querySelectorAll('.btn-hide');
for ( let [ i, id ] of Array.from( MesElemClass ).entries() ) {
id.innerHTML=""
}
}
};
Eject("badgeclip-ntop"); |
Le but de ce code est
1) de faire disparaitre en fonction d'un paramètre XYZ
tous les élements d'une classe donnée .XYZ (bref je supprime des modules JOOMLA à l'affichage)
2)puis ensuite un ID #XYZ qui correspond à une seule ligne dans un module "maitre"
Voici le code de mon module "maitre"
Code:
1
2
3
4
5
6
7
| <div id="btn-hide">
<p> - CHOIX OPTIONS - </p>
<p id="XYZ"</p>
<p id="YZA"</p>
<p id="ABC"</p>
etc.
</div> |
3)Ensuite vérifier dans ce module "maitre" s'il nous reste encore des lignes ("YZA","ABC" etc.) à faire disparaitre
4)Si plus de lignes alors on surprime le module "Maitre"
J'espère être assez clair :roll:
Voici ma question ... ce script semble fonctionner mais
je pense que je peux encore alléger la syntaxe
ex ici
Code:
1
2
3
4
5
|
const MonId = document.querySelectorAll('#'+MaClassName);
for ( let [ i, id ] of Array.from( MonId ).entries() ) {
id.parentNode.removeChild(id);
} |
Je dois supprimer une seule ligne et je fais une boucle bon ...
Est-ce que je dois garder plutôt cette syntaxe ?
Code:
1
2
3
|
var elemid = document.getElementById(MaClassName);
elemid.parentNode.removeChild(elemid); |
où il y a une alternative ?
idem ici
Code:
1
2
3
4
5
6
7
| const LigModcont = document.querySelectorAll('div#btn-hide>p');
var compt =0;
var monid;
for ( let [ i, id ] of Array.from( LigModcont ).entries() ) {
compt=compt+1;
monid=id;
} |
Je voudrais savoir, dans ce pavé, si j'ai un SEUL élément restant à traiter ou pas et c'est tout !?
Donc là encore je suis dans une boucle mais je veux juste compter ...
Merci pour vos réponses
Ps : Attention je ne suis pas un pro du Javascript ;)
