title: i want to get the div with the class name hour 0:00AM by the parent div day sun
body: <p>I have a weekly calendar and want to get the hour by the parent day (<code>sun</code>). I will do the same for for the other days and will get the classes from key/value array. I just want the simple js or jquery code to find it.</p>
  
  <p>This worked for me, but it gets all <code>&lt;div&gt;</code>s under class <code>sun</code>:</p>
  
  <pre><code>$("div.sun &gt;div.hour").addClass('selected'); 
  </code></pre>
  
  
  
  <pre><code>&lt;div class="day sun" style="display: flex; flex-direction: column; margin-right: 1px; margin-bottom: 1px; background: transparent; width: 100%;"&gt;
      &lt;div class="hour 0:00AM" style="background: rgb(221, 221, 221); margin-bottom: 1px; width: 100%; height: 100%; user-select: none;"&gt;&lt;/div&gt;
      &lt;div class="hour 1:00AM" style="background: rgb(221, 221, 221); margin-bottom: 1px; width: 100%; height: 100%; user-select: none;"&gt;&lt;/div&gt;
      &lt;div class="hour 2:00AM" style="background: rgb(221, 221, 221); margin-bottom: 1px; width: 100%; height: 100%; user-select: none;"&gt;&lt;/div&gt;
      &lt;div class="hour 3:00AM" style="background: rgb(221, 221, 221); margin-bottom: 1px; width: 100%; height: 100%; user-select: none;"&gt;&lt;/div&gt;
      &lt;div class="hour 4:00AM" style="background: rgb(221, 221, 221); margin-bottom: 1px; width: 100%; height: 100%; user-select: none;"&gt;&lt;/div&gt;
      &lt;div class="hour 5:00AM" style="background: rgb(221, 221, 221); margin-bottom: 1px; width: 100%; height: 100%; user-select: none;"&gt;&lt;/div&gt;
      &lt;div class="hour 6:00AM" style="background: rgb(221, 221, 221); margin-bottom: 1px; width: 100%; height: 100%; user-select: none;"&gt;&lt;/div&gt;
      &lt;div class="hour 7:00AM" style="background: rgb(221, 221, 221); margin-bottom: 1px; width: 100%; height: 100%; user-select: none;"&gt;&lt;/div&gt;
      &lt;div class="hour 8:00AM" style="background: rgb(221, 221, 221); margin-bottom: 1px; width: 100%; height: 100%; user-select: none;"&gt;&lt;/div&gt;
      &lt;div class="hour 9:00AM" style="background: rgb(221, 221, 221); margin-bottom: 1px; width: 100%; height: 100%; user-select: none;"&gt;&lt;/div&gt;
      &lt;div class="hour 10:00AM" style="background: rgb(221, 221, 221); margin-bottom: 1px; width: 100%; height: 100%; user-select: none;"&gt;&lt;/div&gt;
      &lt;div class="hour 11:00AM" style="background: rgb(221, 221, 221); margin-bottom: 1px; width: 100%; height: 100%; user-select: none;"&gt;&lt;/div&gt;
      &lt;div class="hour 12:00PM" style="background: rgb(221, 221, 221); margin-bottom: 1px; width: 100%; height: 100%; user-select: none;"&gt;&lt;/div&gt;
      &lt;div class="hour 1:00PM" style="background: rgb(221, 221, 221); margin-bottom: 1px; width: 100%; height: 100%; user-select: none;"&gt;&lt;/div&gt;
      &lt;div class="hour 2:00PM" style="background: rgb(221, 221, 221); margin-bottom: 1px; width: 100%; height: 100%; user-select: none;"&gt;&lt;/div&gt;
      &lt;div class="hour 3:00PM" style="background: rgb(221, 221, 221); margin-bottom: 1px; width: 100%; height: 100%; user-select: none;"&gt;&lt;/div&gt;
      &lt;div class="hour 4:00PM" style="background: rgb(221, 221, 221); margin-bottom: 1px; width: 100%; height: 100%; user-select: none;"&gt;&lt;/div&gt;
      &lt;div class="hour 5:00PM" style="background: rgb(221, 221, 221); margin-bottom: 1px; width: 100%; height: 100%; user-select: none;"&gt;&lt;/div&gt;
      &lt;div class="hour 6:00PM" style="background: rgb(221, 221, 221); margin-bottom: 1px; width: 100%; height: 100%; user-select: none;"&gt;&lt;/div&gt;
      &lt;div class="hour 7:00PM" style="background: rgb(221, 221, 221); margin-bottom: 1px; width: 100%; height: 100%; user-select: none;"&gt;&lt;/div&gt;
      &lt;div class="hour 8:00PM" style="background: rgb(221, 221, 221); margin-bottom: 1px; width: 100%; height: 100%; user-select: none;"&gt;&lt;/div&gt;
      &lt;div class="hour 9:00PM" style="background: rgb(221, 221, 221); margin-bottom: 1px; width: 100%; height: 100%; user-select: none;"&gt;&lt;/div&gt;
      &lt;div class="hour 10:00PM" style="background: rgb(221, 221, 221); margin-bottom: 1px; width: 100%; height: 100%; user-select: none;"&gt;&lt;/div&gt;
      &lt;div class="hour 11:00PM" style="background: rgb(221, 221, 221); margin-bottom: 1px; width: 100%; height: 100%; user-select: none;"&gt;&lt;/div&gt;
      &lt;div class="hour 12:00PM" style="background: rgb(221, 221, 221); margin-bottom: 1px; width: 100%; height: 100%; user-select: none;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>