Using JS to check if child element contains value-CodePudding

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 >
   <div >mon</div>
</div>
<div >
   <div >thu</div>
</div>
<div >
   <div >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?

CodePudding user response：

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 >
  <div >mon</div>
</div>
<div >
  <div >thu</div>
</div>
<div >
  <div >wed</div>
</div>

Reference:

CodePudding user response：

If you want to achieve it with pure CSS, you can use data attributes (data-*) and target them using CSS to change styles. Adding data attributes is easy can be done to each span like data-attr="tue" and then use CSS attribute selectors to change/add styles like .day[data-attr="tue"]{...}

Working Code below:

.day[data-attr="mon"] {
  background: red
}
.day[data-attr="tue"] {
  background: green
}
.day[data-attr="wed"] {
  background: yellow
}

<div >
  <div  data-attr="mon">mon</div>
</div>
<div >
  <div  data-attr="tue">tue</div>
</div>
<div >
  <div  data-attr="wed">wed</div>
</div>

CodePudding user response：

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

CodePudding user response：

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 >
   <div >mon</div>
</div>
<div >
   <div >thu</div>
</div>
<div >
   <div >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 >
  <div >mon</div>
</div>
<div >
  <div >thu</div>
</div>
<div >
  <div >wed</div>
</div>

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