How to select divs that has a specific html content that matches value-CodePudding

I've created a calendar, and the days that are displayed are generated with a js loop

     for (let i = 1; i <= lastDay; i  ) {
               if (
                   i === new Date().getDate() &&
                    date.getMonth() === new Date().getMonth()
               ) {
                  days  = `<div >${i}</div>`;
                } else {
                    days  = `<div>${i}</div>`;
                }
           }

It gives me this DOM result :

<div >
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  and so on...t'il 30 or 31 etc
</div>

I'm bringing a repository data from my controller to this twig template that return some dates where sessions has been made.

So I would like to know how I would be able to read with JS all these divs that contains the day number, and mark only the ones that match the twig date (also date number so it matches), and so on the calendar, the user will be able to see every day case where he did a session.

I've thought of some like

for( i=0; i< $(".days div").length; i   )
{
 if($( "div" ).html() == {{ session.dayNumber }})
{
  $("div").addClass("marked");
}
}

But I can't seem to make it work well.

EDIT : I succeeded to log all the days with :

    const monElement = document.querySelector('.days')
        for (let i = 0; i < monElement.children.length; i  ) {
            console.log(monElement.children[i].textContent);
        }

CodePudding user response：

I am not sure if this is what you wanted but maybe you can use this as a start

Since I don't know how you will store the days when the user visited the page, I used an array of 'days' and compare if the current day from loop is equal with the day from visited..

const visited = [2, 5, 8] // i am not sure how you will store the visited days..
const monElement = document.querySelector('.days')

for (let i = 0; i < monElement.children.length; i  ) { // iterate through all elements
  let day = monElement.children[i].textContent;

  for (let v of visited) { // iterate through visited

    if (v == day) {
      monElement.children[i].innerHTML  = ' - visited';
      monElement.children[i].classList.add("marked");
    }
  }

}

.days {
  width: 100px;
}

.marked {
  background-color: yellow;
}

<div >
  <div> 1 </div>
  <div> 2 </div>
  <div> 3 </div>
  <div> 4 </div>
  <div> 5 </div>
  <div> 6 </div>
  <div> 7 </div>
  <div> 8 </div>
  <div> 9 </div>
  <div> 10 </div>
</div>