11518 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

J'ai une liste d'images qui peuvent être de différents formats, disons jpg, svg, png ou webp.

<img class="picture" src="im/pr/2099G.jpg" id="2099X510Xjpg" alt="texte un" />

<img class="picture" src="im/pr/138G.svg" id="138X320Xsvg" alt="texte deux" />

<img class="picture" src="im/pr/2501G.webp" id="2501X190Xwebp" alt="texte trois" />


Dans une boucle JS j'ai besoin de récupérer quelques valeurs placées dans les attributs HTML.

J'y arrive de la façon suivante :



/* tab_ca_id[i] correspond au numéro de l'image, donc 2099 puis 138 puis 2501 */

let imax = document.querySelector ('img[src="im/pr/' + tab_ca_id[i] + 'G.jpg"]');

if (imax === null)
{
imax = document.querySelector ('img[src="im/pr/' + tab_ca_id[i] + 'G.svg"]');
}


etc.

Cela fonctionne mais c'est assez horrible.

Je n'ai pas trouvé en JS l'équivalent du caractère * en css.
Cela existe-t-il ?
Autrement une expression régulière mais je ne sais pas trop comment l'intégrer dans la déclaration.
Ou autre ?

Merci d'avance.
Modifié par boteha_2 (20 Oct 2024 - 17:23)
Modérateur
Bonsoir,

si le nom de fichier est connu, que ce fichier existe mais que son extension peut varier, la valeur de l'attribut à rechercher peut-être alors réduite au nom du fichier sans son extension:

ex :
let imax = document.querySelector ('img[src^="im/pr/' + tab_ca_id[i] + 'G."]');


Est ce que cela conviendrait ?

voir : https://developer.mozilla.org/fr/docs/Web/CSS/Attribute_selectors#attrvaleur_4 si j'ai compris la question Smiley smile

edit , j'ai gardé le . pour ne pas posé le sélecteur sur GG ou Gcakechose Smiley cligne
Modifié par gcyrillus (20 Oct 2024 - 21:05)
Bonjour gcyrillus,

Merci de ton suivi

Cela convient parfaitement.

tab_ca_id + 'G.' est bien un identifiant unique (même sans le ".").

Mozilla a écrit :
[attr^=valeur]
Permet de cibler un élément qui possède un attribut attr dont la valeur commence par valeur.


Je ne connaissais pas...

Test concluant dans la vie réelle.

J'attends un peu avant de cocher Résolu.



Modifié par boteha_2 (20 Oct 2024 - 21:26)