How to add and remove class from multiple elements?

Question

After many-many hours trying to sort it up I gave up and came here for a help.

The idea is:

if div has a class active then images within that div should get class active. If not then images in other divs without class active should have classList.remove('active').

So the image slider should work only with images that has class pic.

I've tried many ways to solve this. But nothing is working. So far I'm trying to solve it this way:

EDITED

I will try to explain it again. Turned out its not that simple.

It is a photo gallery slider. The idea is: When you press on <li>cities</li> for example, then you should see photos only related to this li. But the structure of the image slider works this way: It shows only one photo on the screen. When you press button prev or next it would change the image. But should change images only for the chosen tab ( cities, people, landscape, still life).

So far image slider changes photos only if an image has a class pic.

In this case I decided to do it this way:

If have a class active (class is added when you press on the li and delete when you choose another one) then only images within that div will get class .pic

Hope it made more clear. And thanks for you time

**EDITED**

   <div class="info"> 
        <div class="galery_menu">
        <ul>
            <li class="galery" data="cities">cities</li>
            <li class="galery" data="people">people</li>
            <li class="galery" data="landscape">landscape</li>
            <li class="galery" data="still_life">still life</li>
        </ul>
        </div>

    <div class="galery_slider">

        <a class="prev fade"  alt="prev" >❮</a>
        <a class="next fade"  alt="next" >❯</a>
<div class="imgSlider fade active" id="active" data="cities">

    <img src="img/cities/cities_2.jpg" id="img">
    <img src="img/cities/cities_1.jpg" id="img">
    <img src="img/cities/cities_3.jpg" id="img">
    <img src="img/cities/cities_4.jpg" id="img">

</div>
<div class="imgSlider fade" id="active" data="people">
    <img src="img/people/people_1.jpg" id="img" >
    <img src="img/people/people_2.jpg" id="img" >
    <img src="img/people/people_3.jpg" id="img" >
    <img src="img/people/people_4.jpg" id="img" >
    <img src="img/people/people_5.jpg" id="img" >
    <img src="img/people/people_6.jpg" id="img" >
    <img src="img/people/people_7.jpg" id="img" >
    <img src="img/people/people_8.jpg" id="img" >
</div>
</div>

<script>
let picture = document.getElementById('img'),
    active = document.getElementById('active');
if (active.classList.contains('active')) {
    for (let i = 0; i < picture.length; i++){
        picture[i].classList.add('pic');
     }
} else {
    for (let i = 0; i < picture.length; i++){
        picture[i].classList.remove('pic'); 
}}
</script>

Honestly, you shouldn't need to change the class of descendant elements to match the ancestor, either because of CSS or because of JavaScript. In both cases, from the descendant, you can always check the ancestor element to see if it has a certain class. Perhaps if you shared with us why you feel you need to add and remove the classes, we could help find a better solution. — Heretic Monkey
– Heretic Monkey, Commented Feb 24, 2020 at 22:09
Perhaps explaining what you're building would help to give you a better solution. What does the .pic do? Why don't you just use CSS like .active img { /* pic styles here*/ }? Also, ID means ID. Use classes — Roko C. Buljan
– Roko C. Buljan, Commented Feb 24, 2020 at 22:17
it is for an image slider. So the slider would work with the particular div and images inside it. If you choose tab "cities" then the slider is working with images related to that tab and so on — Andrew
– Andrew, Commented Feb 24, 2020 at 22:19
.pic is a class that the imgae slider is working with. So it should change images only with this class — Andrew
– Andrew, Commented Feb 24, 2020 at 22:24

Ali Yaghoubi · Accepted Answer · 2021-10-18 04:11:36Z

2

You can use Each in your elements and use classList.add/remove/toggle

document.querySelectorAll(".elem").forEach(e => {}
    e.classList.add("any");
);

answered Oct 18, 2021 at 4:11

Ali Yaghoubi

1,29010 silver badges18 bronze badges

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

Comments

Roko C. Buljan · Accepted Answer · 2020-02-24 22:33:45Z

Get rid of the duplicate IDs active and img. Use classes if needed.

Pure CSS solution:

.imgSlider.active img {
  box-shadow: 0 0 0 4px red;
}

<div class="imgSlider fade active" data="cities">
    <img src="https://placehold.it/50x50/0bf">
    <img src="https://placehold.it/50x50/f0b">
    <img src="https://placehold.it/50x50/bf0">
</div>
<div class="imgSlider fade" data="people">
    <img src="https://placehold.it/50x50/fb0">
    <img src="https://placehold.it/50x50/b0f">
    <img src="https://placehold.it/50x50/0fb">
</div>

And if you really need a JS solution...

JavaScript solution:

function handleActivePic () {

  const EL_parents = document.querySelectorAll(".imgSlider");
  
  EL_parents.forEach(parent => {
  
    const isParentActive = parent.classList.contains('active');
    const images = parent.querySelectorAll("img");
    
    images.forEach(img => {
       img.classList[isParentActive?'add':'remove']('pic');
    });
  });
}

handleActivePic(); // Run it!

.pic {
  box-shadow: 0 0 0 4px red;
}

<div class="imgSlider fade active" data="cities">
    <img src="https://placehold.it/50x50/0bf">
    <img src="https://placehold.it/50x50/f0b">
    <img src="https://placehold.it/50x50/bf0">
</div>
<div class="imgSlider fade" data="people">
    <img src="https://placehold.it/50x50/fb0">
    <img src="https://placehold.it/50x50/b0f">
    <img src="https://placehold.it/50x50/0fb">
</div>

Melanie · Accepted Answer · 2020-02-24 22:31:07Z

I can't understand exactly what are you trying to do, but if what you need is change the css of the imgs according a class in the parent... check this maybe helps

.imgSlider.active > img {
  background-color: red;
}

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

<h1>Welcome to My Homepage</h1>

<div class="imgSlider fade active" data="cities">

    <img src="img/cities/cities_2.jpg">
    <img src="img/cities/cities_1.jpg">
    <img src="img/cities/cities_3.jpg">
    <img src="img/cities/cities_4.jpg">

</div>
<div class="imgSlider fade" data="people">
    <img src="img/people/people_1.jpg" >
    <img src="img/people/people_2.jpg" >
    <img src="img/people/people_3.jpg" >
    <img src="img/people/people_4.jpg" >
    <img src="img/people/people_5.jpg" >
    <img src="img/people/people_6.jpg" >
    <img src="img/people/people_7.jpg" >
    <img src="img/people/people_8.jpg" >
</div>
</body>
</html>

unrealapex · Accepted Answer · 2021-10-18 04:01:24Z

var divs = document.getElementsByTagName('div');
var cnt = divs.length;

for(let i = 0; i < cnt; i++){
    var imgs = divs[i].querySelectorAll('img');        
    var iCnt = imgs.length;

   if (divs[i].classList.contains('active')){        
       for(let j = 0; j < iCnt; j++){
          imgs[j].classList.add('active');
       }  
   } else {
       for(let j = 0; j < iCnt; j++){
           imgs[j].classList.remove('active');
       }   
   }
}

<div class="imgSlider fade active" id="active" data="cities">

    <img src="img/cities/cities_2.jpg" class="img">
    <img src="img/cities/cities_1.jpg" class="img">
    <img src="img/cities/cities_3.jpg" class="img">
    <img src="img/cities/cities_4.jpg" class="img">

</div>
<div class="imgSlider fade" id="active" data="people">
    <img src="img/people/people_1.jpg" class="img" >
    <img src="img/people/people_2.jpg" class="img" >
    <img src="img/people/people_3.jpg" class="img" >
    <img src="img/people/people_4.jpg" class="img active" >
    <img src="img/people/people_5.jpg" class="img" >
    <img src="img/people/people_6.jpg" class="img" >
    <img src="img/people/people_7.jpg" class="img" >
    <img src="img/people/people_8.jpg" class="img" >
</div>

Collectives™ on Stack Overflow

How to add and remove class from multiple elements?

4 Answers 4

Comments

Pure CSS solution:

JavaScript solution:

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Pure CSS solution:

JavaScript solution:

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related