title: Jquery selector select a h4 tag under a div
body: <p>I want to change the text in h4 tag to the class name of its grandparent div i.e. (sds 2016 gwap).</p>
  
  <pre><code>   &lt;div class="grid"&gt;
        &lt;div class="office-year-function sds 2016 gwap"&gt;
            &lt;div class="content cell-child"&gt;
                 &lt;img src="535/img/01.jpg" alt="" width="312px" height="160px"&gt;
            &lt;/div&gt;
             &lt;div class="img-hover cell-child"&gt;
                   &lt;br/&gt;
                   &lt;h3&gt;GWAP Kick-off Ceremony&lt;/h3&gt;
                   &lt;h3&gt;2016&lt;/h3&gt;
                   &lt;h4&gt;&lt;/h4&gt;
  </code></pre>
  
  <p>When the document finishes loading, it will run the below function.</p>
  
  <pre><code>function changeTag() {
      for (var i = 1; i &lt;= $('.office-year-function').length; i++) {
          $this = $('div.grid  div.office-year-function:nth-child(' + i + ')');
          var className = $this.attr('class');
          className = className.split(" ");
  
          for (var j = 1; j &lt; className.length; j++) {
              className[j] = className[j].replace("-", " ");
  
              if (className[j] == "gwap") {
                  $this.find("h4").html += className[j].toUpperCase();
              } else {
                  $this.find('h4').html += className[i].capitalize();
              }
          }
      }
  
  }
  </code></pre>
  
  <p>But there's errors in </p>
  
  <pre><code>$this.find("h4").html+=className[j].toUpperCase();
  $this.find('h4').html+=className[i].capitalize();
  </code></pre>
  
  <p>What's wrong with my code?</p>