If both divs have same class add another class to both divs

Question

How can I add a class to 2 divs that have same class ?

In this example I have 3 div and 2 of them share the class ".matched".

How can I add in JS another class (for example.sameclass) to these 2 divs?

Many many thanks in advance!

<div class="container">
  <div class="box1 matched"></div>
  <div class="box2 matched"></div>
  <div class="box3"></div>
</div>

CSS

.container {
  display: flex;
}

.box1 {
  width: 100px;
  height: 100px;
  background-color: red;
}

.box2 {
  width: 100px;
  height: 100px;
  background: green;
}

.box3 {
  width: 100px;
  height: 100px;
  background: purple;
}

Answer 1

Search for the elements with querySelectorAll and then use element.classList.add("matched") within a loop to add the classes.

Answer 2

1. You have to get a reference to the DIVs you want to add a CSS class to. In your case those elements have the shared CSS class matched . JavaScript offers a nifty method to get all elements of a particular class called getElementsByClassName() .

let divs=document.getElementsByClassName("matched");

This returns a HTMLcollection - basically an array - of all the elements with a CSS class matched .

2. Now loop over the elements stored in the HTMLCollection obtained from step 1 and add a specific class using the .classList.add() method. eg

myElement.classList.add("anotherClass");

All together we have:

 let divs = document.getElementsByClassName("matched"); for (let a = 0; a < divs.length; a++) { divs[a].classList.add("anotherClass"); }

 .anotherClass { color: red; }

 <div class="container"> <div class="box1 matched">a</div> <div class="box2 matched">b</div> <div class="box3">c</div> </div>

Answer 3

You can write somthing like this:

let elements = document.getElementsByClassName("matched");
for(let element of elements) {
    element.classList.add("same");
}

Answer 4

If your question is for a generic solution, where you don't know before hand which is the CSS class that might be shared by two elements, then you'll need to inspect the CSS classes that are currently assigned to those elements, to detect which one is shared by two elements.

Here is code that does that. So this code does not look for "matched" in a hard-coded way:

 function findCommon(divs) { let map = {}; for (let div of divs) { for (let cls of div.classList) { if (map[cls]) { return [map[cls], div]; } map[cls] = div; } } return []; // Not found } let pair = findCommon(document.querySelectorAll(".container > div")); for (let div of pair) { // Apply a style to the elements that were found: div.classList.add("highlight"); }

 .container { display: flex; }.container > div { width: 100px; height: 100px; box-sizing: border-box; }.box1 { background: red; }.box2 { background: green; }.box3 { background: purple; }.highlight { border: 8px yellow solid; }

 <div class="container"> <div class="box1 matched"></div> <div class="box2 matched"></div> <div class="box3"></div> </div>

Answer 5

You can use querySelectorAll to get all the elements that have that have that class name. It will return an array of elements that match your query.

you can then iterate over that array with the for loop or forEach method and add the class name using classList.add

Like This:

const boxes = document.querySelectorAll('.matched');

boxes.forEach((box) => {
  boxes.classList.add('sameClass');
});