Loop through all div with the same class and hide text with Javascript

I’m trying to loop through divs with same classes and then find an specific word at the h2 tag so i can identify it and hide or show an other div.

Here is my code:

    <main id="main" class="site-main home-main" role="main">

      <div class="home-product">
       <div class="image-container course-trailer">
        <a href="/"> <img src="./cine-6.jpg" class="home-image" alt=""></a>
       </div>
       <h2><a class="titleCourse" href="/">Pack 4 Cursos de Cine</a></h2>
       <div class="product-info-home">
        <div class="teacher-home" id="imparteText">Imparte </div>
        <div class="price-home">
         <span class="original-price">$2000 MXN</span>
        </div>
       </div>
      </div>

      <div class="home-product">
       <div class="image-container course-trailer">
        <a href="/"> <img src="./cine-6.jpg" class="home-image" alt=""></a>
       </div>
       <h2><a class="titleCourse" href="/">Curso de guíon</a></h2>
       <div class="product-info-home">
        <div class="teacher-home" id="imparteText">Imparte </div>
        <div class="price-home">
         <span class="original-price">$1000 MXN</span>
        </div>
       </div>
      </div>

      <div class="home-product">
       <div class="image-container course-trailer">
        <a href="/"> <img src="./cine-6.jpg" class="home-image" alt=""></a>
       </div>
       <h2><a class="titleCourse" href="/">Pack 4 Cursos de Cine</a></h2>
       <div class="product-info-home">
        <div class="teacher-home" id="imparteText">Imparte </div>
        <div class="price-home">
         <span class="original-price">$2000 MXN</span>
        </div>
       </div>
      </div>

    </main>

And here is my validation for identifying the Course title and hide or show #imparteText but i don´t know how to do this in all the home-product classes:

      <script type='text/javascript'> 
           var title = document.getElementsByClassName('titleCourse').textContent;
           var imparte = document.getElementById('imparteText');
            if ( title.includes('Pack')){
            imparte.style.display = 'none';
            } else {
            imparte.style.display = 'block';
            }
        </script>

Does anybody knows how to do this? Thank you very much!

Answer

Loop over each of the .titleCourse elements.

You need to change imparteText to a class so you can repeat it in each DIV.

To find the imparteText DIV in the same DIV as the titleCourse, use .closest() to find the containing DIV, then .querySelector() to find the DIV with that class.

var courses = document.querySelectorAll('.titleCourse')

courses.forEach(course => {
  title = course.textContent;
  var imparte = course.closest(".home-product").querySelector('.imparteText');
  if (title.includes('Pack')) {
    imparte.style.display = 'none';
  } else {
    imparte.style.display = 'block';
  }
});
<main id="main" class="site-main home-main" role="main">

  <div class="home-product">
    <div class="image-container course-trailer">
      <a href="/"> <img src="./cine-6.jpg" class="home-image" alt=""></a>
    </div>
    <h2><a class="titleCourse" href="/">Pack 4 Cursos de Cine</a></h2>
    <div class="product-info-home">
      <div class="teacher-home imparteText">Imparte </div>
      <div class="price-home">
        <span class="original-price">$2000 MXN</span>
      </div>
    </div>
  </div>

  <div class="home-product">
    <div class="image-container course-trailer">
      <a href="/"> <img src="./cine-6.jpg" class="home-image" alt=""></a>
    </div>
    <h2><a class="titleCourse" href="/">Curso de guíon</a></h2>
    <div class="product-info-home">
      <div class="teacher-home imparteText">Imparte </div>
      <div class="price-home">
        <span class="original-price">$1000 MXN</span>
      </div>
    </div>
  </div>

  <div class="home-product">
    <div class="image-container course-trailer">
      <a href="/"> <img src="./cine-6.jpg" class="home-image" alt=""></a>
    </div>
    <h2><a class="titleCourse" href="/">Pack 4 Cursos de Cine</a></h2>
    <div class="product-info-home">
      <div class="teacher-home imparteText">Imparte </div>
      <div class="price-home">
        <span class="original-price">$2000 MXN</span>
      </div>
    </div>
  </div>

</main>