意外的令牌，不明白为什么

Question

I'm new to JS and trying to creating a simple function, I get an error

Uncaught SyntaxError: Unexpected token '{'

Which I do understand, but I can't understand why. According to the console, I have a problem in here:

function displayGallery(galleryName) { 

let src = './Images/' + galleryName + '/';
let imageIndex = 1;
let myGridCells = $('.foodImage');

foreach (image in myGridCells) { <--- problem here.
    let newSrc = src + imageIndex + '.jpg';
    image.attr('src', newSrc);
    imageIndex++;
}

fadeMainGrid();
}

But nothing seems to ne missing or extra '{', what is happening here? I tried but couldn't find an answer to why this is happening.

Answer 1

function displayGallery(galleryName) { 

let src = './Images/' + galleryName + '/';
let imageIndex = 1;
let myGridCells = $('.foodImage');

for (image in myGridCells) { <--- problem SOLVED here.
    let newSrc = src + imageIndex + '.jpg';
    image.attr('src', newSrc);
    imageIndex++;
}

fadeMainGrid();
}

Its for not forEach when looping like this.

see here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration

Answer 2

To iterate over a jQuery collection use .each :

images.each(function(i, image) {
    let newSrc = src + (i+1) + '.jpg';
    $(image).attr('src', newSrc);
});

Answer 3

it seems to be just a simple syntax error, you can replace "foreach" with "for" and it should work the same

instead of being this:

foreach (image in myGridCells) {
    let newSrc = src + imageIndex + '.jpg';
    image.attr('src', newSrc);
    imageIndex++;
}

it should instead be this:

for (image in myGridCells) {
    let newSrc = src + imageIndex + '.jpg';
    image.attr('src', newSrc);
    imageIndex++;
}