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

4 réponses

  1.
    jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830
     

    Bonjour

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

    1
  2. jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830
     
            
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
    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
      1. jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830 > 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
      2. rdbn > jordane45 Messages postés 30426 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
  3. 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
    1. jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830
       

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

      this.data.work.list
      1
  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

Mon pc s'allume et s'éteint en boucle
Jack -
Daniel -

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

6 réponses