jQuery get index of certain child elements and ignore others
<p>I'm trying to get the index of a child element <code>ol</code>, but there is also some <code>h2</code>'s in there which I don't need and are therefore polluting my results when using the jQuery <code>index()</code> function.</p>

<p>So I need the index of the <code>ol</code>, as if there weren't any <code>h2</code>'s at all. So that if you click on the 3rd <code>ol</code> the index will be <code>2</code> and not <code>4</code>.</p>

<p>The HTML looks like this:</p>

<pre><code>&lt;div&gt;
    &lt;h2&gt;Title&lt;/h2&gt;
    &lt;ol&gt;&lt;li&gt;Item&lt;/li&gt;&lt;li&gt;Item&lt;/li&gt;&lt;li&gt;Item&lt;/li&gt;&lt;/ol&gt;
    &lt;h2&gt;Title&lt;/h2&gt;
    &lt;ol&gt;&lt;li&gt;Item&lt;/li&gt;&lt;li&gt;Item&lt;/li&gt;&lt;li&gt;Item&lt;/li&gt;&lt;/ol&gt;
    &lt;h2&gt;Title&lt;/h2&gt;
    &lt;ol&gt;&lt;li&gt;Item&lt;/li&gt;&lt;li&gt;Item&lt;/li&gt;&lt;li&gt;Item&lt;/li&gt;&lt;/ol&gt;
    &lt;h2&gt;Title&lt;/h2&gt;
    &lt;ol&gt;&lt;li&gt;Item&lt;/li&gt;&lt;li&gt;Item&lt;/li&gt;&lt;li&gt;Item&lt;/li&gt;&lt;/ol&gt;
&lt;/div&gt;
</code></pre>

<p>And the jQuery:</p>

<pre><code>$('ol li').click(function () {
    // get current index position of the ol
    var itemIndex   = $(this).parent('ol').index();

    alert(itemIndex);
});
</code></pre>
