title: javascript / jQuery: Get the appropriate heading for any element
body: <p>given the following html structure (just as an example, it doesn't make that much sense):</p>
  <pre><code>&lt;div id=&quot;wrapper&quot;&gt;
      &lt;h3&gt;First Heading&lt;/h3&gt;
      &lt;div class=&quot;row&quot;&gt;&lt;div class=&quot;col-12&quot;&gt;&lt;p class=&quot;p1&quot;&gt;Paragraph I&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;input class=&quot;input1&quot; type=&quot;text&quot; /&gt;
      &lt;ul&gt;
          &lt;li&gt;First Item&lt;/li&gt;
          &lt;li&gt;Second Item&lt;/li&gt;
      &lt;/ul&gt;
      &lt;button class=&quot;b1&quot;&gt;Send&lt;/button&gt;
      &lt;h3&gt;Second Heading&lt;/h3&gt;
      &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col-4&quot;&gt;
              &lt;p class=&quot;p1&quot;&gt;Paragraph II&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class=&quot;col-4&quot;&gt;
              &lt;p class=&quot;p1&quot;&gt;Paragraph III&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class=&quot;col-4&quot;&gt;
              &lt;div class=&quot;wrapper1&quot;&gt;
                  &lt;button class=&quot;b1&quot;&gt;Click Me!&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;button class=&quot;b1&quot;&gt;Cancel&lt;/button&gt;
      &lt;input class=&quot;input1&quot; type=&quot;text&quot; /&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I want to get the appropriate &quot;human style heading&quot; (with pure js or jquery)- what a human would think that is the correct heading for an element. This is always the nearest heading by reading the document from the element upwards.</p>
  <p>so for the first button (.b1 with content &quot;Send&quot;) it would be &quot;First Heading&quot;, for the second and third button .b1 it would be &quot;Second Heading&quot;. The DOM is much more complex, the only reliable thing is, that the headings (h3 in this case) are always a direct child of div #wrapper.</p>
  <p>I did several approaches with javascript closest, jquery parents(), nextAll() ... without success :(</p>