'Using JS to check if child element contains value

I been searching but can't find a useful answer.

.event [IF CHILD 'day' CONTAINS 'mon'] {background-color:blue;}
.event [IF CHILD 'day' CONTAINS 'thu'] {background-color:red;}
.event [IF CHILD 'day' CONTAINS 'wed'] {background-color:green;}
<div class="event">
   <div class="day">mon</div>
</div>
<div class="event">
   <div class="day">thu</div>
</div>
<div class="event">
   <div class="day">wed</div>
</div>

This is basically what I would like to do. As far as I know this is not possible with pure CSS.

But it should be possible with JS, but I am not exactly sure how..

Anyone knowing how to do this?

javascriptcss


Solution 1:[1]

You need to select all event with querySelectorAll then forEach and check if textContent of every day is equal to one of your choise like:

const event = document.querySelectorAll('.event');
event.forEach(el => {
  var day = el.querySelector('.day');
  if (day.textContent === 'mon') {
    el.classList.add('blue');
  } else if (day.textContent === 'thu') {
    el.classList.add('red');
  } else if (day.textContent === 'wed') {
    el.classList.add('green');
  }
});
.blue {
  background-color: blue;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}
<div class="event">
  <div class="day">mon</div>
</div>
<div class="event">
  <div class="day">thu</div>
</div>
<div class="event">
  <div class="day">wed</div>
</div>

Reference:

Solution 2:[2]

If you just need to do this with all pure javascript then this can help you or you can go with use of jquery as suggested in other answers

let allDivs = document.querySelectorAll("[class^=event]")

for (let i = 0; i < allDivs.length; i++) {
    let text = allDivs[i].textContent.trim();
    switch (text) {
        case 'mon':
            allDivs[i].style.backgroundColor = "blue";
            break;

        case 'thu':
            allDivs[i].style.backgroundColor = "red";
            break;
        case 'wed':
            allDivs[i].style.backgroundColor = "green";
            break;
    }
}

Solution 3:[3]

You can create css rules with the innerText of each .day div, and then you can add the class to the .event div depending of the innerText of its child div:

const eventDivs = document.querySelectorAll('.event');

for (const e of eventDivs) {
  const child = e.querySelector('.day')
  e.classList.add(`text-${child.innerText}`);
}
  
.text-mon  {background-color:blue;}
.text-thu  {background-color:red;}
.text-wed  {background-color:green;}
<div class="event">
   <div class="day">mon</div>
</div>
<div class="event">
   <div class="day">thu</div>
</div>
<div class="event">
   <div class="day">wed</div>
</div>

With Jquery it is even easier, and you can do it in-line:

$('.event').each((_, e) => $(e).addClass(`text-${$(e).find('.day').text()}`));
.text-mon  {background-color:blue;}
.text-thu  {background-color:red;}
.text-wed  {background-color:green;}
<div class="event">
  <div class="day">mon</div>
</div>
<div class="event">
  <div class="day">thu</div>
</div>
<div class="event">
  <div class="day">wed</div>
</div>

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

Solution 4:[4]

Update: Based on the OP's clarification

You can change the parent style using JS as CSS always cascades down. To do it, simply get all the day class divs, iterate them, check the text and change the parent CSS as you want. I have used the Switch statement here. Each case represents the day div.

node.parentNode gets the parent event div of the current iterated day div and we change the style using JS.

Note: The example only shows two cases, please add more as you need.

Working Code below:

Array.from(document.querySelectorAll("div.day")).forEach(node => {
  switch (node.textContent) {
    case 'mon':
      node.parentNode.style.background = 'grey';
      break;
    case 'tue':
      node.parentNode.style.background = 'green';
      break;
    default:
      node.parentNode.style.background = 'white';
  }
})
<div class="event">
  <div class="day" data-attr="mon">mon</div>
</div>
<div class="event">
  <div class="day" data-attr="tue">tue</div>
</div>
<div class="event">
  <div class="day" data-attr="wed">wed</div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Simone Rossaini
Solution 2 Anupam Rawal
Solution 3
Solution 4

Related Questions