Selecting nearest heading element
<p>For a given element (which may be nested down in the DOM), I am trying to select it's 'closest' (nearest) heading element <code>&lt;h1&gt;</code>-<code>&lt;h6&gt;</code> in the DOM above. As the heading is not an ancestor, jQuery's <code>closest</code> will not suffice.</p>

<p>To clarify, the element is not likely to be a sibling of the headings - e.g. the <code>&lt;span&gt;</code>s of the code below.</p>

<p>Example HTML: </p>

<pre><code>&lt;section&gt;
    &lt;h1&gt;Heading&lt;h1&gt;
    &lt;h2&gt;Subheading&lt;/h2&gt;
    &lt;p&gt;Lorem ipsum...&lt;/p&gt;
    &lt;ul&gt;
      &lt;li&gt;
          &lt;p&gt; ... &lt;span class="where-am-i"&gt;What heading am I under?&lt;/span&gt; ... &lt;/p&gt;
      &lt;/li&gt;
    &lt;/p&gt;
    &lt;!-- Should return the H2 above --&gt;
    &lt;p&gt;Lorem ipsum... &lt;/p&gt;
&lt;/section&gt;
</code></pre>

<p>Similar, but different enough (I hope), to <a href="https://stackoverflow.com/questions/4068236/select-specific-closest-element">this</a> question.</p>