CODEWITHSUNDEEP
javascripthtmlcss
VeboZ
VeboZ

Reputation: 1

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

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;
}

Upvotes: 0

Views: 1109

Answers (5)

do-ri
do-ri

Reputation: 7

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');
});

Upvotes: 0

trincot
trincot

Reputation: 350252

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>

Upvotes: 0

Ebad Masood
Ebad Masood

Reputation: 2379

You can write somthing like this:

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

Upvotes: 0

obscure
obscure

Reputation: 12891

  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.

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

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>

Upvotes: 1

Tasos Tsournos
Tasos Tsournos

Reputation: 353

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

Upvotes: 3

Related Questions