Add class based on div content with javascript

Question

These are the 8 cards player1 has at the beginning of my card game.

<div class="player1HandCard1 player1Hand">7♦</div>
<div class="player1HandCard2 player1Hand">2♦</div>
<div class="player1HandCard3 player1Hand">A♣</div>
<div class="player1HandCard4 player1Hand">A♠</div>
<div class="player1HandCard5 player1Hand">8♦</div>
<div class="player1HandCard6 player1Hand">10♥</div>
<div class="player1HandCard7 player1Hand">9♣</div>
<div class="player1HandCard8 player1Hand">9♠</div>

Using javascript, I would like to add a .red class to just the div's who have the ♦ and the ♥ suits in their content.
How can I achieve that?

Please see https://stackoverflow.com/help/how-to-ask. We're not a free coding service. — isherwood, May 14 '21 at 19:57
https://stackoverflow.com/questions/1520429/is-there-a-css-selector-for-elements-containing-certain-text — kmoser, May 14 '21 at 19:58

connexo · Answer 1 · 2021-05-14T20:11:42.423

Like this:

[...document.querySelectorAll('div')] // get all the divs
  .filter(d=>['♦', '♥'] // filter to only those
    .some(c=>d.textContent.includes(c)) // where either '♦' or '♥' occurs in the text
  )
  .forEach(c=>c.classList.add('red')); // for each of those filtered divs, add the class .red

.red { color: red; }

<div class="player1HandCard2 player1Hand">7♦</div>
<div class="player1HandCard4 player1Hand">2♦</div>
<div class="player1HandCard3 player1Hand">A♣</div>
<div class="player1HandCard1 player1Hand">A♠</div>
<div class="player1HandCard5 player1Hand">8♦</div>
<div class="player1HandCard6 player1Hand">10♥</div>
<div class="player1HandCard7 player1Hand">9♣</div>
<div class="player1HandCard8 player1Hand">9♠</div>

An even shorter version makes use of el.classList.toggle(className, bool):

[...document.querySelectorAll('div')] // get all the divs
  .forEach( // for each of those divs
    c=>c.classList.toggle( // toggle the class .red based on the condition
      'red', 
      ['♦', '♥'].some(s=>c.textContent.includes(s))
    )
  );

.red { color: red; }

<div class="player1HandCard2 player1Hand">7♦</div>
<div class="player1HandCard4 player1Hand">2♦</div>
<div class="player1HandCard3 player1Hand">A♣</div>
<div class="player1HandCard1 player1Hand">A♠</div>
<div class="player1HandCard5 player1Hand">8♦</div>
<div class="player1HandCard6 player1Hand">10♥</div>
<div class="player1HandCard7 player1Hand">9♣</div>
<div class="player1HandCard8 player1Hand">9♠</div>

score 2 · Accepted Answer · answered May 14 '21 at 20:00

You could do something like this:

const divs = document.getElementsByTagName("div");
for(let i = 0; i < divs.length; i++){
   if(divs[i].innerHTML.includes("♦") || divs[i].innerHTML.includes("♥")) {
       divs[i].classList.add("red");
   }
}

.red {
  color: red;
}

<div class="player1HandCard2 player1Hand">7♦</div>
<div class="player1HandCard4 player1Hand">2♦</div>
<div class="player1HandCard3 player1Hand">A♣</div>
<div class="player1HandCard1 player1Hand">A♠</div>
<div class="player1HandCard5 player1Hand">8♦</div>
<div class="player1HandCard6 player1Hand">10♥</div>
<div class="player1HandCard7 player1Hand">9♣</div>
<div class="player1HandCard8 player1Hand">9♠</div>

Thanks. This was exactly what I tried to do but without good results! — Matt, May 15 '21 at 06:59

Add class based on div content with javascript

2 Answers2