title: Getting the index of a current element across all matched elements in the DOM
body: <p>I have a DOM structure that looks like this:</p>
  
  <pre><code>&lt;div class="chapter"&gt;
     &lt;section&gt;&lt;/section&gt;
     &lt;section&gt;&lt;/section&gt;
  &lt;/div&gt;
  &lt;div class="chapter"&gt;
     &lt;section&gt;&lt;/section&gt;
     &lt;section&gt;&lt;/section&gt;
     &lt;section class="current"&gt;&lt;/section&gt;
     &lt;section&gt;&lt;/section&gt;
  &lt;/div&gt;
  &lt;div class="chapter"&gt;
     &lt;section&gt;&lt;/section&gt;
     &lt;section&gt;&lt;/section&gt;
     &lt;section&gt;&lt;/section&gt;
     &lt;section&gt;&lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to get the index number of the section with a class of "current", across all sections. In this example the index of that would be 5, since it's the 5th section tag and contains a class of current.</p>
  
  <p>How do I get this with jQuery?</p>
  
  <p>I've started with this to get a list of all sections in the dom:</p>
  
  <pre><code>var sections = $('section');
  </code></pre>
  
  <p>I've tried things like this to try and get the result I want:</p>
  
  <pre><code>alert($(sections+'.current').index());
  </code></pre>
  
  <p>That returns a js error.</p>
  
  <p>What am I missing here? Thanks!</p>