Double boucle ForEach problème

Fermé

rdbn - 12 janv. 2023 à 19:43
rdbn - 12 janv. 2023 à 23:13

Bonjour,

J'ai dans mon html 5 div <img> (différente class), j'ai les chemins src sur un tableau.

comment mettre un chemin src pour chaque div, sans boucler 2 fois..

const img = document.querySelectorAll('.content-left img');

img.forEach((img) => {
    console.log(img);
    // j'ai bien mais 5 div img
});
    
this.data.work.list.forEach((item) => {
    console.log(item.img);
    // j'ai bien mais 5 chemin src  
});


// mon code

img.forEach((img) => { // boucle 5 fois
   this.data.work.list.forEach((item) => { // je reboucle 5 fois
      img.setAttribute('src', item.img);
   });
});

comment faire pour mettre juste 1 liens par div ?

svp merci !
Windows / Chrome 109.0.0.0

A voir également:

Double boucle ForEach problème
Double ecran - Guide
Whatsapp double sim - Guide
Double appel - Guide
Double authentification google - Guide
Double ecran souris ne passe pas ✓ - Forum souris / Touchpad

4 réponses

Réponse 1 / 4

jordane45 Messages postés 38150 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 29 avril 2024 4 651
12 janv. 2023 à 20:38

Bonjour

Faudrait nous montrer le code HTML sur lequel tu veux appliquer ça..

Réponse 2 / 4

jordane45 Messages postés 38150 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 29 avril 2024 4 651
12 janv. 2023 à 21:20

        
var imgs = document.querySelectorAll('.card-frame > img');
console.log('images',imgs);

imgs.forEach(function(img,i) {
    let imgToDisplay = typeof(data.work.list[i]) != 'undefined' ? data.work.list[i] : null;
    if(imgToDisplay){
            console.log(i,img,imgToDisplay.img);
      img.src = data.work.list[i].img;
    }
    // j'ai bien mais 5 div img
});

rdbn
Modifié le 12 janv. 2023 à 22:04

J'ai analysé ton code pour bien comprendre.

Mon erreur a été de faire un 2e forEach sur mes données... alors qu'il fallait mettre un index.

Donc si j'aurais eu un id j'aurais pu remplacer i par data.id ?

Et je n'ai pas compris la variable imgToDisplay ? pourquoi vérifie le type ?

Merci Beaucoup !

jordane45 Messages postés 38150 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 29 avril 2024 4 651 > rdbn
12 janv. 2023 à 22:43

Tu as 6 div et seulement 5 images.

Je vérifie donc via l'écriture Ternaire que l'image à l'index i. existe pour éviter d'avoir une erreur.

rdbn > jordane45 Messages postés 38150 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 29 avril 2024
12 janv. 2023 à 23:13

Ah je vois, en réalité j'ai bien 6 div images, mais j'ai oublié de l'inclure dans mon explication car visuellement c'est un cadre png transparent qui entoure une image en pos abs donc je ne l'ai pas considéré comme "6e" image, mais oui tu as bien fait de vérifier !

well done !

Réponse 3 / 4

rdbn
12 janv. 2023 à 20:48

 
<body>
    <!-- Section Work -->
    <section class="section work">
        <div class="content-left">
            <div class="card-frame">
                <img class="frame">
                <img class="img back"> 
                <img class="img back">
                <img class="img center">
                <img class="img back"> 
                <img class="img back"> 
            </div>
        </div>
    </section>
    <!-- Section Work -->
</body>

sur un code html simple, j'ai voulus insérer les chemins via javascript au lieu de l'écrire dans le html

jordane45 Messages postés 38150 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 29 avril 2024 4 651
12 janv. 2023 à 20:51

Et d'où provient ( et que contient ) ta variable

this.data.work.list

Réponse 4 / 4

rdbn
Modifié le 12 janv. 2023 à 21:11

elle provient d'un tableau que j'ai créer ou je stock toute mes données

const data = {

    work: { 
		title: 'work',
		subtitle: ['', '', '', ''],
		list:[
            {
                title: '',
                img: '/images/img1.png',
                alt: '',
            },
            {
                title: '',
                img: '/images/img2.png',
                alt: '',
            },
            {
                title: '',
                img: '/images/img3.png',
                alt: '',
            },
            {
                title: '',
                img: '/images/img4.png',
                alt: '',
            },
            {
                title: '',
                img: '/images/img5.png',
                alt: '',
            },
        ] 
    }
}  
export default data;

elles contiennent les chemins src pour chaque div

Discussions similaires

Mon pc s'allume et s'éteint en boucle

comment ecrire un double cote " "

Redémarrage en boucle Xiamo mi note 10

Boucle en Batch

Ma Freebox redémarre tout le temps

Discussions similaires

Newsletters