Double boucle ForEach problème
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
-
Modérateur
Bonjour
Faudrait nous montrer le code HTML sur lequel tu veux appliquer ça..
-
<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
-
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
-
Modérateur
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 });
-
-
Modérateur@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.
-
@jordane45
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 !
-
