Double boucle ForEach problème

rdbn -  
 rdbn -

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:

4 réponses

Réponse 1 / 4
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 

Bonjour

Faudrait nous montrer le code HTML sur lequel tu veux appliquer ça..
1
Réponse 2 / 4
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
  
        
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
});

1
rdbn
 

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 !

0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752 > rdbn
 

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.

1
rdbn > jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention  
 

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 !

1
Réponse 3 / 4
rdbn
  
 
<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
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 

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

this.data.work.list
1
Réponse 4 / 4
rdbn
 

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
0

Discussions similaires

comment ecrire un double cote " "
helmii -
[Dal] -

3 réponses
Supprimer le paramètre "Stockage interne, messagerie double"
simoncolten -
momo2775 -

5 réponses
Intérêt d'une carte mère bi processeur?
aurel38 -
MrSaucisse -

6 réponses