addClass to first child of multiple elements in array

Question

I have array elements, I would like to apply a function to each element in this array that adds the class .active to the first child. Currently I'm getting the error

'Uncaught TypeError: projectImage.forEach is not a function'

What is the problem with this? Any help pointers be greatly appreciated

var Image = {
    init: function() {
        Image.setupImages();
    },
    setupImages: function() {
        var projectImage = $('.project-img');
        projectImage.forEach(function(project) {
            project.find('.project-thumnbail').eq(0).addClass('active');
        });
    },
}
$(document).ready(function() {
    Image.init();
});

.project-thumbnail {
    visibility: hidden;
}
.active {
    visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="project-img">
    <div class="project-thumbnail">
        <img src="http://via.placeholder.com/250/000000">
    </div>
    <div class="project-thumbnail">
        <img src="http://via.placeholder.com/250/000000">
    </div>
    <div class="project-thumbnail">
        <img src="http://via.placeholder.com/250/000000">
    </div>
    <div class="project-thumbnail">
        <img src="http://via.placeholder.com/250/000000">
    </div>
</div>

<div class="project-img">
    <div class="project-thumbnail">
        <img src="http://via.placeholder.com/250/ffffff/000000">
    </div>
    <div class="project-thumbnail">
        <img src="http://via.placeholder.com/250/ffffff/000000">
    </div>
</div>

did you forget to add projectImage.children().forEach()..? — Jimenemex
– Jimenemex, Commented Dec 28, 2017 at 17:26
Possible duplicate of How to convert a DOM node list to an array in Javascript? — Dexygen
– Dexygen, Commented Dec 28, 2017 at 17:28

SLaks · Accepted Answer · 2017-12-28 17:27:05Z

3

As the error is trying to tell you, jQuery doesn't have a forEach function.

You probably mean .each().
Also, it passes elements, not jQuery objects.

See the documentation.

answered Dec 28, 2017 at 17:27

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

zfrisch Over a year ago

I swear you are one second ahead of me the last couple of days. For posterity the documentation specifically can be found -> api.jquery.com/jquery.each

palaѕн · Accepted Answer · 2017-12-28 17:27:44Z

1

Replace forEach with .each() like:

var projectImage = $('.project-img');
projectImage.each(function() {
    $(this).find('project-thumnbail:eq(0)').addClass('active');
});

as projectImage is an jQuery object not an JS array and forEach is an array method.

answered Dec 28, 2017 at 17:27

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Comments

samanime · Accepted Answer · 2017-12-28 17:27:44Z

0

var projectImage = $('.project-img');

gives a jQuery object. forEach() isn't a function on the jQuery object, it's only on vanilla.

Instead of forEach(), use each(), which is the jQuery equivalent.

projectImage.each(element => { console.log('do something'); });

answered Dec 28, 2017 at 17:27

samanime

26.8k17 gold badges99 silver badges155 bronze badges

Collectives™ on Stack Overflow

addClass to first child of multiple elements in array

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related